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

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

喜欢以下

＆＃13;

＆＃13;

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;
} 

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

将文本放入任何类型的容器中并将（通过类）clear: both添加到：{/ p>

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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