[英]How to move text to a new line below floated elements
我想在页面的整个屏幕上使用两个相邻的按钮。 但是我可以弄清楚如何将“文本”移到下一行。
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/
像下面
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>
将文本放在任何类型的容器中,并(通过类)添加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>
如何在不更改标记的情况下进行操作:
加
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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.