如何将文本移动到浮动元素下方的新行

Question

I want to use two buttons next to each other on all wide of screen on my page. But I can figure out how to move "text" to the next line.

 input.tlacidlo { width: 38%; display: inline; float: left; margin: 10px 5px 20px 20px; cursor: pointer; font-weight: bold; background: #3366cc; color: #fff; border: 1px solid #3366cc; border-radius: 5px; -moz-box-shadow: 6px 6px 5px #999; -webkit-box-shadow: 6px 6px 5px #999; box-shadow: 6px 6px 5px #999; } input.tlacidlo:hover { color: #fff; background: #1dc801; border: 1px solid #fff; } 

 <form><input class="tlacidlo" type="button" value="získajte zľavu 10%" /></form> <form><input class="tlacidlo" type="button" value="získajte 3,6% zľavu z ceny nákupu + 5€" /></form> Text 

You can see it on my website: https://www.akosizarobitpeniaze.sk/booking-zlava-promo-kod-voucher/

Answer 1

Like following

 input.tlacidlo { width: 38%; display: inline; float: left; margin: 10px 5px 20px 20px; cursor: pointer; font-weight: bold; background: #3366cc; color: #fff; border: 1px solid #3366cc; border-radius: 5px; -moz-box-shadow: 6px 6px 5px #999; -webkit-box-shadow: 6px 6px 5px #999; box-shadow: 6px 6px 5px #999; } input.tlacidlo:hover { color: #fff; background: #1dc801; border: 1px solid #fff; } 

 <form><input class="tlacidlo" type="button" value="získajte zľavu 10%" /></form> <form><input class="tlacidlo" type="button" value="získajte 3,6% zľavu z ceny nákupu + 5€" /></form> <div style="clear:both;">Text</div> 

Answer 2

Put the text in ANY type of container and add (via a class) clear: both to that:

 input.tlacidlo { width: 38%; display: inline; float: left; margin: 10px 5px 20px 20px; cursor: pointer; font-weight: bold; background: #3366cc; color: #fff; border: 1px solid #3366cc; border-radius: 5px; -moz-box-shadow: 6px 6px 5px #999; -webkit-box-shadow: 6px 6px 5px #999; box-shadow: 6px 6px 5px #999; } input.tlacidlo:hover { color: #fff; background: #1dc801; border: 1px solid #fff; } .newclass { clear: both; } 

 <form><input class="tlacidlo" type="button" value="získajte zľavu 10%" /></form> <form><input class="tlacidlo" type="button" value="získajte 3,6% zľavu z ceny nákupu + 5€" /></form> <p class='newclass'>Text</p> 

Answer 3

How to do it without changing the markup:

Add

form + form:after {
  content:'';
  display:block;
  clear:left;
}

 input.tlacidlo { width: 38%; display: inline; float: left; margin: 10px 5px 20px 20px; cursor: pointer; font-weight: bold; background: #3366cc; color: #fff; border: 1px solid #3366cc; border-radius: 5px; -moz-box-shadow: 6px 6px 5px #999; -webkit-box-shadow: 6px 6px 5px #999; box-shadow: 6px 6px 5px #999; } input.tlacidlo:hover { color: #fff; background: #1dc801; border: 1px solid #fff; } form + form:after { content:''; display:block; clear:left; } 

 <form><input class="tlacidlo" type="button" value="získajte zľavu 10%" /></form> <form><input class="tlacidlo" type="button" value="získajte 3,6% zľavu z ceny nákupu + 5€" /></form> Text