Stas Petrov Stas Petrov - 1 month ago 17
CSS Question

Bad button positioning

<div class="head-btn wow fadeInLeft">
<a href="#intro" class="btn-primary">Get started</a>
<a href="#intro" class="btn-default">Read more</a>
</div>

.head-btn {
margin-bottom: 40px;
}

.btn-default {
font-size: 16px;
margin: 30px 0 10px;
padding: 15px 30px;
height: 35px;
border-radius: 80px;
}


But in small sizes its look like that:

enter image description here

Please helpm me with this. Thanks

Answer

By default, <a></a> element is inline element, and inline element will wrap by default if its contents overflow. Because the default overflow settings is visible, so your more displays in the next line to Read.

To fix this, add a line white-space:nowrap; to force your btn-default element not to wrap when the contents overflow.

For more about inline element, please refer to https://www.w3.org/TR/CSS22/visuren.html#inline-boxes .

Comments