使用带有显示表格单元格的边距

Question

我尝试在li中添加margin-left/margin-right但是它们之间没有空格.我应该添加什么来在列表之间创建一个空格？

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>

Answer 1

display: table-cell 使您的元素显示就像在 a 中一样<table>，不幸的是，它不能很好地处理边距。您可以在该元素内添加另一个<div>元素并给这个元素一个 a margin，或者只是给它填充。这实际上取决于所需的设计。