使用CSS分发内联元素

Question

有没有一种简单的方法可以使用CSS在父块容器中分发内联元素？将边距设置为自动不起作用,因为内联元素之间的边距设置为0并且我不想因为内容是动态的而导致百分比混乱.

特别是,我在段落(p)中有几个锚元素(a),它跨越80%的容器,我正在寻找一种简单的方法在段落内均匀分布它们.

编辑(@cletus):段落不会换行,锚点是段落中唯一的东西.通过均匀分布,我的意思是左(右)边和第一(最后)元素之间的空间和元素本身是等距的.

Answer 1

嗯，听起来你正在创建一个菜单？您可能想要使用列表来保存锚点并相应地设置列表的样式。这是普遍接受的最佳实践。

至于元素的均匀分布，我昨天正在寻找类似的东西，我希望它会出现在 CSS3 规范中，但它不是（至少我找不到它），如果你问的话，这似乎是一个主要的问题我。反正...

这留下了两个选择。CSS 和 JavaScript。

对于 CSS，为每个元素使用 margin-right 属性。最好创建一个 .last 类，将 margin-right 设置为零，以防止最后一个元素破坏布局。

有很多 javascript 可以为你做这件事。我更喜欢仅在绝对必要时才使用 JS，因此我无法评论哪一个最好。

...还有最后一件事你可以尝试，但是...你没有从我这里听到这个好吗？

你可以用一张桌子。这是获得你想要的东西最快（也是最肮脏）的方法。

恕我直言，您可能不想听到这个，但设计可能有缺陷。众所周知，使用 CSS 在布局中均匀分布项目是一件痛苦的事情，因此设计人员应该避免这样做。

更新：你也可以尝试

.link_container { text-align: center; }
.link_container a { margin-right: 10x; }
.last { margin-right: 0; }

然后使用这样的东西

<div class='link-container'>
    <a href='...'>Some line</a>
    <a href='...'>Some line</a>
    <a href='...'>Some line</a>
    <a class='last' href='...'>Some line</a>
</div>

这可能会让你接近。