CSS水平菜单 - 等间距？答案

【问题标题】：CSS horizontal menu - equally spaced?CSS水平菜单 - 等间距？
【发布时间】：2010-11-15 06:59:09
【问题描述】：

我有一个标准的 CSS 菜单，由 UL 和 LI 标签组成。我需要它们水平地覆盖整个页面（不是我的真实情况，但我会用它来简化情况）。但是，这些项目是动态创建的，因此我无法硬编码任何与 LI 项目或边距有关的内容。

我见过使用 JavaScript 设置这些值的解决方案，但我真的很想避免使用它们。

最后，我看到了一个很好的解决方案，它正在设置

#menu {
    width: 100%;
    /* etc */
}
#menu ul {
    display: table;
}
#menu ul li {
    display: table-cell;
}

这将在大多数浏览器中创建所需的行为...除了 IE。

有什么想法吗？

编辑：感谢您的回复。但是，由于生成项目的代码不是我的，我无法在创建项目时设置内联样式，而无需稍后使用 JavaScript。

【问题讨论】：

您需要它们“覆盖整个页面”吗？您的意思是水平 100% 页面宽度，均分？您是否能够在每个页面上使用标准按钮，以及动态创建的子菜单？另外：哪个版本的 IE 出现了问题？我认为是display: table /* or table-cell */ 引起了问题。尽管我内心厌恶，但如果您以这种方式呈现，您可能还不如使用真正的 html 表...对不起 =(
嗨。没有必要覆盖整个页面，但我这样做是为了简化情况。是的，它们应该间隔相等。我不太了解按钮问题。您指的是标准

标签： list stylesheet spacing css

【解决方案1】：

如果您愿意使用 Flexbox，那么这并不难。我即将发布的代码的全部功劳归于CSS Tricks，因为这是他们的 CSS。

以下是包含供应商前缀的示例。

#menu{
  
  list-style: none;
  
  -ms-box-orient: horizontal;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around; 
  justify-content: space-around; 
  
 }

<ul id="menu">
  <li>Home</li>
  <li>Store</li>
  <li>Blog</li>
  <li>About</li>
  <li>Contact</li>
</ul>

Flexbox 的唯一问题是如果您需要支持 IE 9 及以下版本，否则，我认为没有理由不使用 Flexbox。你可以view browser support for Flexbox here。

【讨论】：

【解决方案2】：

这对我有用：

#menu{
    height:31px;
    width:930px;
    margin:0 auto;
    padding:3px 0px 0px 90px;
    color:#FFF;
    font-size:11px;
}
#menu ul{
    display:inline;
    width:930px;
    margin: 0 auto;
}
#menu ul li{
    list-style:none;
    padding:0px 0px 0px 0px;
    display:inline;
    float:left;
    width:155px;
}

【讨论】：

感谢您的回复，但我看到您正在手动设置 li 元素的宽度，这是我需要避免的。

【解决方案3】：

如果你想让元素获得整个可用空间，则无需先验定义菜单元素的宽度（当然，这将有助于调整 li 元素的大小）。您可以通过处理display 属性来解决此问题。

#menu{
  display: table;
  width: 100%;
}

#menu > ul {
  display: table-row;
  width: 100%;
}

#menu > ul >li {
  display: table-cell;
  width:1%
}

请注意，width:1% 是必需的以避免单元格折叠。

【讨论】：

我不太明白所要求的 1%；你能详细说明一下吗？
这是一个小技巧（也是一种常见的做法）！我知道这似乎没有意义，但它应该将某些东西的宽度设置为适合内容所需的最小值。事实上，即使你将宽度设置为 1%，如果内容是 200px 宽，它也会以最小 200px 显示。有人还添加了“white-space:nowrap”属性，但视情况而定。问候。
太棒了。在阅读了五十个帖子说要用伪元素来解决它之后，我仍然知道必须有一个适当的方法。

【解决方案4】：

您不能设置内联元素的高度或宽度。 http://www.w3.org/TR/CSS2/visudet.html#inline-width

试试display:inline-block;

这里是 ie 的修复：

display:inline-block;
zoom:1;
*display:inline;

【讨论】：

谢谢你，杰西，你向我指出这个属性让我很开心
Alpha，这应该被标记为已发布问题的正确答案。这是在大多数浏览器（包括 IE6+）上正确使用内联块元素的最准确和最全面的方法
你能指定哪个元素应该有这种风格吗？李?乌尔？分区？谢谢。

【解决方案5】：

#menu ul li {
    float: left;
    clear: none;
    display: inline;
    padding: 10px;
    height: 25px; //how tall you want them to be
    width: 18%; //you will need to set the width so that all the li's can fit on the same line.
}

宽度：18% 可能是正确的，如果你有 5 个元素，占边框和填充。但它会因你有多少元素、多少填充等而有所不同。

【讨论】：

你知道，关于“填满整个页面”(height: 100%)，我不相信他所说的就是他的意思。我假设——我肯定是错的——他的意思只是水平的。用导航填充整个页面只是 听起来 错误 =/
height: 100% 是指 li 标签和 ul。推测他已经将 ul 设置为特定高度，或者具有另一个具有特定高度的包装元素。 height: 100% 只会确保它占用了所有可用空间。
没错，我说的“填满整个页面”是横向的，抱歉之前没说清楚。已经编辑了问题。谢谢！
我建议在 li 内的链接上设置填充（如果是菜单），因为它会增加可点击区域。

【解决方案6】：

如果您的菜单项是动态生成的（因此您不知道之前会有多少），那么您可以将style="width:xx" 属性添加到lis（或在顶部的<style> 中。 .. 或者你喜欢的任何地方，真的）。其中xx 应为width_of_parent_div_in_px/number_of_elements+'px' 或100/number_of_elements+'%'。 lis 也应该是 block 级元素，floated left。

【讨论】：

谢谢，这似乎是一个干净的解决方案，但是，生成项目的代码不是我的，如果不使用 javascript，我将无法设置样式。很抱歉之前没有提到。
4 年后偶然来到这里。由于您使用的是 Javascript，而现在您可以使用 JQuery：var listId = $('#listId'); var listItems = listId.children('li'); var listItemCount = listItems.length; listItems.css('width',listId.width/listItemCount + 'px');