3

HTML

<div id="menu">
    <a href="#">Commissions</a>
    <a href="#">Business Setup</a>
    <a href="#">Administrator</a>
    <a href="#">Content Management</a>
    <a href="#">Inventory</a>
    <a href="#">Communications Tools</a>
    <a href="#">Genealogy</a>
    <a href="#">Reports</a>
</div>

CSS

#menu {
    width: 1000px;
    float: left;
    font-size: 9pt;
    text-align: justify;
}
#menu a {
    text-decoration: none;
    color: #0066cc;
    font-size: 9pt;
}
#menu a:hover {
    text-decoration: underline;
}

我想让每个链接都具有整个宽度。我试图用 text-align: justify 来实现。但它不起作用。我怎样才能做到这一点？

4

3 回答 3

5

这将使 div 间隔均匀（可以是链接或任何元素）。您遇到的问题是 justify 不适用于单行文本（或最后一行文本）。这就是为什么你需要 :after 伪元素。

html:

<div class="wrapper">
  <div>This can be anything.</div>
  <div>This can be anything.</div>
  <div>This can be anything.</div>
  <div>This can be anything.</div>
  <div>This can be anything.</div>
  <div>This can be anything.</div>
</div>

CSS：

.wrapper{
  text-align: justify;
}
.wrapper div{
  display: inline-block;
}
.wrapper:after{
  content: "";
  width: 100%;
  display: inline-block;
}
于 2013-08-06T18:09:23.470 回答
2

我不确定我是否完全理解你的问题，但是通过你想要证明做一些它不打算做的事情的声音。

只有当一行文本在容器的右边缘换行时，文本才会对齐。

然而，这不会真正发生在您的菜单中。

因此，我没有合理的修复（我说修复，虽然没有任何问题），而是有另一个建议。

据我了解，您希望您的链接均匀分布在您的 div 中。

我能想到的最好方法是根据链接数量为 a 元素提供一个基于百分比的宽度，并对齐到中心而不是对齐。

例如：

#menu a {
    text-decoration: none;
    color: #0066cc;
    font-size: 9pt;
    width: 12%;
    display: inline-block;
    text-align: center;
}

我不知道这是否是您想要的，但您可以尝试一下，看看您的想法。

于 2010-12-19T12:41:12.617 回答
0

不，所有链接都有不同的长度。但是这些链接之间的长度应该相同。

我只有一个表格解决方案。http://jsfiddle.net/Flack/Q7z6q/

我知道它很脏，如果有人提出更好的主意，我会很高兴。

于 2010-12-19T12:52:26.887 回答