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

Posted 2023-04-13

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

【英文标题】：Horizontal menu with evenly spaced items, and dynamic clickable area (anchors)

【发布时间】：2014-02-10 05:51:00

【问题描述】：

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

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

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

谢谢！

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;

【问题讨论】：

你打算在路上有一个下拉/飞出元素吗？水平菜单中的项目数量会改变还是大部分时间保持不变？ JS是一种选择吗？什么是“均匀分布”的？这是因为在窗口中散布的任何块元素中，文本通常会居中，或者使文本元素之间的间隙均匀。除了第一个和最后一个元素 - 左侧需要 1 个间隙宽度，右侧需要 1 个间隙宽度（如果页面整体具有左右边距并且菜单必须在某个标题下居中，则左右两侧没有间隙)。

我知道解决方案，但您能否分享至少部分代码，您的 html 结构是什么样的？你试过什么？...

我计划没有下拉/飞出，因为我总是发现它们令人沮丧且难以使用（在用户方面），项目的数量可能会改变，但很可能是相同的。我想避免JS。均匀分布就是均匀分布，每个项目之间的间距完全相同。

我明天可以链接一些东西，丹科。不过，我还没有真正接触过我的网站代码，所以我将链接我一直在使用的示例。谢谢！ :)

【参考方案1】：

制作一个宽度为 100% 的 ul。将所有 li 元素的宽度设置为百分比（对于 4 个项目，每个设置为 25%，等等）。不要使用边框属性来分隔 li 元素，而是使用 box-shadow 属性：

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

【讨论】：

我很想用 box-shadow 代替边框，但是 IE8 不支持它，而且 IE8 仍然有相当大的尺寸使用份额。出于这个原因，我一直在避免主要设计结构的大部分情况下使用 CSS3。我个人喜欢 box-shadow 属性，我希望人们升级他们的浏览器哈哈>.

如果你不介意实现它，试试css3pie.com。使用“边框”制作灵活的布局绝对值得。我有一组特定的脚本和样式表，我在我的所有网站上都使用它们来使它们 IE7 和转发几乎完全兼容 HTML5 和 CSS3...几乎 =)

现在，太棒了！非常感谢您提供的资源！我现在可能最终会使用 CSS3！ =)

没问题！也许想将我的答案标记为一个好的解决方案？ =)

啊，对，我明白了！ :) 我投了赞成票，但没有意识到有一个单独的函数可以将其标记为解决方案。不过明白了，谢谢！ :D