text-align:justify not working

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(可以是链接或任何元素).您遇到的问题是,对齐不适用于单行文本(或最后一行文本).这就是为什么你需要:在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;
}