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/
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>
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>
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.