html - 具有均匀间隔元素和动态可点击区域( anchor )的水平菜单

Question

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

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

一般来说，我知道解决这个问题的方法是将 block 的显示属性分配给 anchor 标记。然后，我分配了填充，使“ block ”具有可点击的大小，并适本地将元素彼此隔开。但考虑到这些元素不是静态的，我不知道这将如何工作。有没有人有任何想法或建议？

谢谢!

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

编辑:2014 年 1 月 21 日

我想我找到了解决方案(见下文)

这是我正在使用 ATM 的示例，尽管我只是发现这并不困难，而且我遇到的问题与我根据尝试使它与基于文本对齐的可扩展导航菜单版本。这也与我遇到的一个问题有关，我的 CSS 中间有一个红点，但在 Dreamweaver 中没有显示:

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

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

所以看起来真的很简单，就像将 block 的显示属性分配给 anchor 标签 -shrugs- 一样简单。对于占用大家的时间，我深表歉意，但还是感谢您的宝贵时间!非常感谢您的帮助! :) 我将尝试将它变成一些有用的东西，并将我的工作示例代码放在下面(它需要一些调整，具体取决于你想做什么，最后一个单元格有双边框效果，但主要机制至少在谷歌浏览器中它似乎对我来说是完全可用的)

(顺便说一句，我必须感谢 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;