Question

我正在尝试创建一个总是与浏览器窗口一样宽的水平菜单（设置最小宽度并在窗口中水平居中），具有均匀间隔的项目，并且具有动态可点击锚点（当浏览器的宽度发生变化时，实际的可点击锚点会加宽和缩小以匹配项目，因为它们会变宽和缩小。

一位朋友建议我将我的菜单从静态更改为适合浏览器窗口的宽度，因为它重新调整尺寸，我喜欢这个想法，但我只是在弄清楚我是怎么去尝试的它在我自己的网站上。他将以下stackoverflow问题和答案链接到我，并提供了两个解决方案，但在这两个解决方案中，可点击区域仅限于实际文本。

我知道解决这个问题的方法，一般来说，就是将block的display属性赋给锚标签。然后我分配填充以给出“块”它的可点击大小并适当地将项目彼此隔开。但我不明白这是如何工作的，因为这些项目不是静态的。有没有人有任何想法或建议？

谢谢！

How to stretch a fixed number of horizontal navigation items evenly and fully across a specified container

编辑：2014年1月21日

我想我找到了解决方案（见下文）

这是我正在使用ATM的例子，虽然我只是发现这并不困难，我遇到的问题与我根据我试图让它与a一起工作的一些假设有关。基于文本对齐的可缩放导航菜单版本。这也与我在CSS中间出现的一个问题有点相关，而这个问题没有出现在Dreamweaver中：

CSS Anchor tag properties are being ignored completely in #nav li a

该红点导致我的CSS代码中断，作为一种效果，我分配给锚标记的属性都没有做任何事情。

所以看起来它就像为锚标签-shrugs-分配块的显示属性一样简单。我很抱歉占用了每个人的时间，但感谢你的时间，不管你有多少时间！我非常感谢你的帮助！ :)我将尝试把它变成一些有用的东西，并将我的工作示例代码放在下面（它需要一些调整取决于你想要做什么，最后一个单元格有双边框效果，但主要的机制它似乎至少在Google Chrome中对我来说非常实用）

（顺便说一下，我必须赞成这个代码的felix。这是他们发布的答案，我用它作为起点来尝试让所有这些对我有用。

How to stretch a fixed number of horizontal navigation items evenly and fully across a specified container）

再次感谢大家！

（jsfiddle版本：http://jsfiddle.net/T392Z/）

HTML

<ul id="nav">
    <li><a href="#">Link1</a></li>
    <li><a href="#">Link2</a></li>
    <li><a href="#">Link3</a></li>
    <li><a href="#">Link4</a></li>
    <li><a href="#">Link5</a></li>
    <li><a href="#">Link6</a></li>
</ul>

CSS

#nav {
    position: relative;
    left: -2px;
    margin: 0;
    padding: 0;
    border: 2px solid black;
    display: table;
    height: 87px;
    width: 100%;
}

#nav li {
    display: table-cell;
    height: 87px;
    width: 16.666666667%;  /* (100 / numItems)% */
    line-height: 87px;
    text-align: center;
    background: #ddd;
    border-right: 1px solid black;
    text-decoration: none;
}
#nav li a {
    font-size: 32px;
    text-decoration: none;
    color: white;
    display: block;
}

Answer 1

制作宽度为100％的ul。制作所有li元素百分比的宽度（对于4个项目，每个25％，等等）。不使用border属性来分隔li元素，而是使用带有属性的box-shadow：

box-shadow: 0px 0px 1px #000000;

水平菜单，均匀分布的项目和动态可点击区域（锚点）

1 个答案: