如何將文本移動到浮動元素下方的新行

Question

我想在頁面的整個屏幕上使用兩個相鄰的按鈕。 但是我可以弄清楚如何將“文本”移到下一行。

 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 

您可以在我的網站上看到它： https : //www.akosizarobitpeniaze.sk/booking-zlava-promo-kod-voucher/

Answer 1

像下面

 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

將文本放在任何類型的容器中，並（通過類）添加clear: both要：

 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

如何在不更改標記的情況下進行操作：

加

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