Question

我使用了this问题中的代码来创建一个水平菜单，其中每个项目均匀分布。

这是我的版本：

<div id="navigation">
  <ul>
    <li class="first">
      <a href="#" title="Home Page">Home</a>
    </li>
    <li>
      <a href="#">About&ensp;us</a>
    </li>
    <li>
      <a href="#">What&ensp;we&ensp;cover</a>
    </li>
    <li>
      <a href="#">Monitoring&ensp;agencies</a>
    </li>
    <li>
      <a href="#">Publishers</a>
    </li>
    <li>
      <a href="#">News</a>
    </li>
    <li>
      <a href="#">Contact&ensp;us</a>
    </li>
  <span></span>
</ul>
</div>

CSS：

#navigation {
    text-align: justify;
}

#navigation ul span {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 0;
}

#navigation ul {
    display: inline;
    list-style: none;
}

#navigation ul li {
    display: inline
}

#navigation ul li a {
    display: inline;
    border-right: solid 1px #ccc;
}

#navigation ul li.last a {
    border-right: none;
}

有没有办法让垂直线向右移动，使它们位于a标签末尾和li标签末尾之间？

Here是一个小提琴。

我添加了答案here。

Answer 1

Hack为Spacer Motif使用额外元素

小提琴参考：http://jsfiddle.net/audetwebdesign/bF6ey/

考虑以下HTML：

<div id="navigation">
<ul class="navigation">
  <li class="first">
    <a href="#" title="Home Page">Home</a>
  </li>
  <li class="spacer-motif">|</li>
  <li>
    <a href="#">About&ensp;us</a>
  </li>
  <li class="spacer-motif">|</li>
  ...
  <li class="spacer-motif">|</li>
  <li>
    <a href="#">Contact&ensp;us</a>
  </li>
</ul>
</div>

我在链接之间添加了一个额外的列表项：<li class="spacer-motif">|</li>（是的，我也畏缩了......）。

CSS如下：

#navigation {
    padding: 0 20px; /* add spacing at left/right edges of list */
}
#navigation ul {
    display: table;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
}
#navigation ul li {
    display: table-cell;
    text-align: center;
    width: 1%; /* force cell to shrink-to-fit text */
    outline: 1px dashed blue;
}
#navigation ul li.spacer-motif {
    width: 10%; /* force spacers to take up a lot of space */
    outline: none;
}

#navigation ul li a {
    white-space: pre;
}

布局基于使用表格显示类型。

对于ul，请使用display: table并将宽度设置为100％。请记住将边距和填充值清零。

对于li，请使用display: table-cell和text-align: center。

诀窍是强制表格单元缩小以适应文本标签设置width: 1%，然后为li.spacer-motif设置width: 10%以强制使用white-space: pre 垫片扩展（均匀）以填满线。

要将文字链接包装成2行或3行，请在<a>元素（链接）中设置table-cell。

清理语义

这里的问题是链接文本的宽度不同，因此无法简单地使用带有右边框或左边框和居中文本的{{1}}。链接之间的额外间距会有所不同，左/右边框在链接文本之间不会均匀分布。

解决这个问题的方法是添加额外的元素。我使用了一个管道（|），但我想你可以添加一个带有1px边框的伪元素并将其居中等等。

但是，如果元素有问题，可以使用jQuery或JavaScript插入它们。

IE 7支持 - Hack for CSS
如果需要IE7支持，则需要根据以下内容调整CSS：
CSS: table and table-cell replacement for IE7

Answer 2

这里看一下这个小提琴HERE

我做了一些小调整。我将display:inline;更改为float:left;并将文本居中。

空间来自我给

的5px填充

ul li a

Answer 3

我会display: table使用ul，display: table-cell使用li。{p> 甚至在a标签

的两侧填充

Answer 4

根据您之后的间距，这样的事情应该有效：

#navigation ul li a {
    padding-right: 10px;
}

根据需要更改“px”值。

Answer 5

您可以尝试这样的事情：

#navigation ul li a {
    display: inline;
    margin-right: -14px;
    padding-right: 14px;
    border-right: solid 1px #ccc;
}

但它可能不是跨浏览器。

http://jsfiddle.net/gjFYf/2/

Answer 6

我发现padding-right: 30px;中的#navigation ul li a效果很好。

Answer 7

我通过在列表中插入额外的列表元素然后将这些元素的宽度设置为单个像素来实现此功能。我还设置了背景颜色并删除了超链接上的边框。

新款......

#navigation ul li.line {
    display: inline-block;
    *display: inline;
    zoom: 1;
    width: 1px;
    background-color: #ccc;
    height: 24px;
    position: relative;
    top: 5px;
}

#navigation ul li a {
    display: inline;
    line-height: 36px;
    height: 36px;
    text-decoration: none;
    font-size: 18px;
    color: #14328C;
    font-weight: bold;
}

新的Html代码段

  <li>
    <a href="default.aspx?tabid=154">Publishers</a>
    <li class="line" />
  </li>

但它在IE7中不起作用。文本对齐似乎忽略了额外的li，除非它包含内容。

现在它在语义上也是错误的。

Fiddle

CSS中的水平对齐菜单，空格中的栏

7 个答案:

Hack为Spacer Motif使用额外元素

清理语义