Question

我正在尝试设置水平分布（我不知道该行中有多少个元素）。我在这个小提琴http://jsfiddle.net/thirtydot/jwJBd/中找到了我正在寻找的东西，但我宁愿是否有某种方法在该行的最后一个元素的第一个和右边距处没有左边距（同时保持其他边缘）...基本上我想要的是第一个和最后一个元素与布局的极端对齐，但它们之间有间距）。

有没有办法做到这一点？我已经查看了所有与此主题相关的问题，但似乎没有一个完全适合我的HTML ...（我无法更改html，因为它是一个插件，除非我用javascript更改它，或重写我不打算做的插件）如果必须的话，我可以使用javascript，但我宁愿用CSS做。为了避免混淆，我的布局是投资组合布局，而不是菜单。

HTML

<div style="width: 100%">
    <ul id="horizontal-style">
        <li><a href="#">Nav Item</a></li>
        <li><a href="#">Short Item</a></li>
        <li><a href="#">Really Long Nav Item</a></li>
        <li><a href="#">Nav Link</a></li>
        <li><a href="#">Another Link</a></li>
    </ul>
</div>

CSS

#horizontal-style {
    display: table;
    width: 100%
}
#horizontal-style li {
    display: table-cell;
}
#horizontal-style a {
    display: block;
    border: 1px solid red;
    text-align: center;
    margin: 0 5px;
    background: #999
}

div {
    background: #ccc
}

Answer 1

first-child适用于所有现代浏览器并返回IE7.0。 I'm pretty sure it's safe to use.

修改您的CSS，如下所示：

#horizontal-style a {
    display: block;
    border: 1px solid red;
    text-align: center;
    margin: 0 0 0 5px; /* change here*/
    background: #999
}

/*add this*/
#horizontal-style li:first-child a {
    margin-left: 0;
}

jsFiddle

Another jsFiddle包含多行和不同的元素数量。

Answer 2

我宁愿是否有某种方法没有左边距到每行的最后一个元素的第一个和右边距（同时保持其他边距）...基本上我想要的是第一个和最后的元素与布局的极端对齐，但它们之间有间距）。有没有办法做到这一点？

让每行的第一个和最后一个元素具有其外边距 - 并通过为UL元素提供相应的负边距来隐藏它们侧上。

水平分布没有左边距或右边距

2 个答案: