具有均匀间隔项目的水平菜单和动态可点击区域（锚点）

Question

我正在尝试创建一个水平菜单，该菜单始终与浏览器窗口一样宽（具有设置的最小宽度并在窗口中水平居中），具有均匀间隔的项目，并且具有动态可点击的锚点（实际可点击的锚点会随着浏览器宽度的变化而适当地扩大和缩小以匹配项目，因为它们会扩大和缩小）

一位朋友建议我将我的菜单从静态更改为适应浏览器窗口的宽度，因为它会重新调整大小，我喜欢这个想法，但我只是无法弄清楚我将如何尝试它在我自己的网站上。他给我链接了下面的stackoverflow问答，提供了两种解决方案，但在这两种解决方案中，可点击区域仅限于实际文本。

一般来说，我知道的解决方法是将块的显示属性分配给锚标签。然后我分配填充以使“块”具有可点击的大小并正确地将项目彼此隔开。但是考虑到这些项目不是静态的，我看不出这将如何工作。有没有人有任何想法或建议？

谢谢！

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

编辑：2014 年 1 月 21 日

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

这是我正在使用 ATM 的示例，尽管我只是发现这并不困难，而且我遇到的问题与我基于尝试使其与 ATM 一起工作而做出的一些假设有关可扩展导航菜单的基于文本对齐的版本。这也与我在我的 CSS 中间出现的一个红点问题有些相关，该问题没有出现在 Dreamweaver 中：

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

那个红点导致我的 CSS 代码中断，因此，我分配给锚标记的所有属性都不起作用。

所以看起来就像将块的显示属性分配给锚标签-耸肩-一样简单。我很抱歉占用大家的时间，但无论如何感谢您的时间！我非常感谢您的帮助！ :) 我会尝试把它变成一些有用的东西，并将我的工作示例代码放在下面（它需要根据你想要做的事情进行一些调整，最后一个单元格具有双边框效果，但主要机制至少在谷歌浏览器中它似乎对我来说功能齐全）

（顺便说一句，我必须将这段代码归功于 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%，等等）。不要使用边框属性来分隔 li 元素，而是使用 box-shadow 属性：

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