对显示表单元格使用margin [英] Using margin with display table-cell

问题描述

我已经尝试在li中添加margin-left / margin-right，但它没有给它们之间的空格。我应该添加什么，以在列表之间创建一个空格？

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： b

<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 使您的元素显示就像在< table> 中，不幸的是，它不能很好地与边距。您可以在此元素中添加另一个< div> ，并为此元素添加 margin ，或者只是给它填充。这取决于所需的设计，真的。

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.

这篇关于对显示表单元格使用margin的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！