Question

是否有一种使用CSS在父块容器中分发内联元素的简单方法？将边距设置为自动不起作用，因为内联元素之间的边距设置为0，并且我不想弄乱百分比，因为内容是动态的。

特别是，我在段落（p）中有几个锚元素（a），它跨越80％的容器，我正在寻找一种简单的方法在段落内均匀分布它们。

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

Answer 1

不幸的是，CSS无法实现这一点。但是，在元素宽度相等的特殊情况下，this CSS hack会使其变得相当容易。

使用可变宽度元素之间的等距间距，即使为每个元素的容器指定宽度百分比也是不够的。这仍然会在元素之间创建一个可变宽度。

这可能与大多数现代浏览器上的JavaScript有关。 Here is an example page演示了一个实施不当的JavaScript黑客攻击并证明尝试使用文本对齐来解决此问题将无法可靠地运行。

Answer 2

如果CSS3是可接受的（即，如果它在IE6中的外观不是最重要的），您可以使用“table”和“table-cell”的display属性值来使用任何类型的表格显示模型元件; “inline-block”也是需要考虑的事情，它在不破坏新行的情况下就像一个块。

Answer 3

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

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

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

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

那里有一堆javascripts会为你做这件事。我绝对不喜欢在绝对必要时使用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>

这可能会让你接近。

Answer 4

我发现的最佳解决方案是对包含div进行居中对齐，然后为每个链接提供一个固定且合理的左右填充，可以容纳长链接和短链接。虽然这不会将链接均匀地隔开在顶栏上，但它会提供视觉上令人愉悦的效果。

<div style='text-align:center'>
    <a style='padding-left:10px;padding-right:10px'>Link 1</a>
    <a style='padding-left:10px;padding-right:10px'>Link 2</a>
    <a style='padding-left:10px;padding-right:10px'>Link 3</a>
</div>

Answer 5

有点不清楚“均匀分布”是什么意思;难道你想要证明段落内容的合理性吗？

p { text-align: justify; }

Answer 6

您的锚点是否设置了特定的宽度？我认为任何保证金自动化都可能是必要的。

Answer 7

在容器上使用display：table并显示：table-cell上的项目似乎对我有用。它甚至适用于IE8

<!DOCTYPE html>
<html>
<head>
<!-- insert reset CSS here -->
    <style type="text/css">
    #header {
        width: 940px;
        margin: 0 auto;
        background-color: #E6EFE6;
    }

    #main_nav {
        width: 100%;
        display: table;
    }

    #main_nav .nav-item {
        display: table-cell;
        text-align:center;
    }
    </style>
</head>
<body>
<div id="header">
    <ul class="" id="main_nav">
        <li class="nav-item first">
            <a href="#">Item 1</a>
        </li>
        <li class="nav-item">
            <a href="#">Item 2</a>
        </li>
        <li class="nav-item">
            <a href="#">Item 2</a>
        </li>
        <li class="nav-item">
            <a href="#">Item 2</a>
        </li>
        <li class="nav-item">
            <a href="#">Item 2</a>
        </li>
        <li class="nav-item">
            <a href="#">Item 2</a>
        </li>
        <li class="nav-item last">
            <a href="#">Item 3</a>
        </li>
    </ul>
</div>
<body>
</html>

使用CSS分发内联元素

7 个答案: