I have try adding margin-left/margin-right in li but it doesn't give them a space in between. What should I add to make a space in between the list ?
CSS:
.btn-top {
float: right;
height: 40px;
margin-right: 10px;
margin-top: 10px;
}
.btn-top ul {
height: 100%;
padding: 0;
}
.btn-top ul li {
list-style-type: none;
display: table-cell;
width: 100px;
height: 30px;
vertical-align: middle;
text-align: center;
border-style: solid;
border-color: #333;
border-width: 2px;
border-radius: 10px;
}
HTML:
<div class="btn-top"><ul>
<li><a href="#"><span class="btn" =>btn1</span></a></li>
<li style="width:150px"><a href="#"><span class="btn">btn2</span></a></li>
</ul>
display: table-cell
makes your element display just as if it were in a <table>
, where, unfortunately, doesn't work well with margins. You could add another <div>
inside this element and give this one a margin
, or simply give it padding. It depends on the desired design, really.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With