1

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

有没有办法做到这一点？我已经在 SO 上查看了与该主题相关的所有问题，但似乎没有一个完全适合我的 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
}
4

2 回答 2

1

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

让每行的第一个和最后一个元素都有它们的外边距 - 并通过给元素两侧UL相应的负边距来隐藏它们。

于 2013-05-06T12:37:18.897 回答
1

first-child适用于所有现代浏览器并返回到 IE7.0。我很确定它可以安全使用。

修改您的 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

另一个具有多行和不同元素数量的jsFiddle 。

于 2013-05-05T13:37:56.790 回答