1

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

这是我的版本：

<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 标签的末尾之间？

这是一个小提琴。

我在这里添加了一个答案。

4

7 回答 7

3

Hack 使用额外元素作为间隔图案

小提琴参考：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%强制间隔（均匀）扩展以填满行。

要防止文本链接换行成 2 或 3 行，white-space: pre请在<a>元素（链接）中进行设置。

清理语义

这里的问题是链接文本的宽度不同，这使得不可能简单地使用table-cell带有左右边框和居中文本的 's。链接之间的额外间距会有所不同，并且左/右边框不会在链接文本之间均匀分布。

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

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

IE 7 Support - Hack for CSS
如果您需要 IE7 支持，您需要根据以下内容调整 CSS：
CSS：IE7 的表格和表格单元格替换

于 2013-05-15T12:05:36.713 回答
1

这里看看这个小提琴这里

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

空间来自我给的 5px 填充

ul li a
于 2013-05-15T10:03:16.853 回答
0

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

新款式...

#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 中不起作用。文本 align 似乎忽略了额外的 li ，除非它包含内容。

它现在在语义上也是不正确的。

小提琴。

于 2013-05-15T11:22:08.593 回答
0

你可以尝试这样的事情：

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

但它可能不是跨浏览器。

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

于 2013-05-15T10:07:43.937 回答
0

我会为此使用display: tableonul和display: table-cellon li。a甚至在标签的两侧都有填充

于 2013-05-15T09:55:18.810 回答
0

根据您之后的间距，这样的事情应该可以工作：

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

根据您的需要更改“px”值。

于 2013-05-15T09:59:52.043 回答
0

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

于 2013-05-15T10:32:03.643 回答