文本對齊：證明不起作用

Question

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來實現。 但它不起作用。 我怎樣才能做到這一點？

Answer 1

這將使div均勻分布（可以是鏈接或大約任何元素）。 您遇到的問題是，對齊方式不適用於單行文本（或最后一行文本）。 這就是為什么需要：after psuedo元素的原因。

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;
}

Answer 2

我不確定我是否完全理解您的問題，但是從聲音的角度來看，您想證明做某事不是設計好的。

僅當一行文本環繞在容器的右邊緣時，文本才被對齊。

但是，這實際上不能在菜單中發生。

因此，我有一個建議，而不是一個合理的解決方案（我說是修復，盡管什么都沒壞）。

據我了解，您希望您的鏈接在整個div中平均分布。

我能想到的最好方法是根據鏈接數為a元素提供基於百分比的寬度，並對齊中心而不是對齊。

例如：

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

我不知道這是不是您想要的，但是您可以嘗試一下，看看您的想法。

Answer 3

否。所有鏈接的長度都不同。 但是這些鏈接之間的長度應該相同。

我只有一個表解決方案。 http://jsfiddle.net/Flack/Q7z6q/

我知道這很臟，如果有人提出了更好的主意，我將很高興。