CSS水平菜单 - 等距离间隔？

Question

我有一个标准的CSS菜单，由UL和LI标签制作而成。我需要它们横向覆盖整个页面（这不是我的真实情况，但我会采取这种方式来简化情况）。但是，这些项目是动态创建的，因此我无法硬编码任何LI项的宽度或边距。

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

最后，我看到了一个非常好的解决方案，就是设置

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

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

有什么想法吗？

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

- Alpha

---

你需要它们“覆盖整个页面”吗？你是指水平100%页面宽度，均分吗？您是否能够在每个页面上拥有标准按钮，并动态创建子菜单？另外：哪个版本的IE出现了问题？我假设是display: table /* or table-cell */引起了问题。尽管我内心不喜欢，但如果您以这种方式呈现，则最好使用真正的HTML表格...对此我感到抱歉 =( - David Thomas

嗨。没有必要覆盖整个页面，但我这样做是为了简化情况。是的，它们应该等距离间隔。我不太理解按钮问题。您是否指的是标准的<button>元素？我尝试过IE 6、IE 7，但还没有尝试过IE 8。此外，我的第一种方法是使用表格，因为我无法以其他方式获得所需的结果...但这是从模板生成器中出现的，所以我必须使用列表。无论如何，谢谢。=) - Alpha

Answer 1

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

尝试使用display:inline-block;

这里是IE的解决方法：

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

- Jesse

---

谢谢Jesse，你指出这个属性让我很开心。 - cardflopper

Alpha，这应该被标记为发布的问题的正确答案。这是最准确和全面的方法，可以在包括IE6+在内的大多数浏览器上正确地使用内联块元素。 - Austin S.

请问您能具体说明应该给哪个元素添加这种样式吗？是li元素？ul元素？还是div元素？谢谢。 - Clinton J

Answer 2

如果您想让元素占用整个可用空间，则无需预先定义菜单元素的宽度（当然，在等分li元素方面会有所帮助）。您可以通过调整 display 属性来解决这个问题。

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

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

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

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

- JeanValjean

---

我不太明白需要1％的内容；你能详细说明一下吗？ - Petrogad

这是一个小技巧（也是一种常见的做法）！我知道它似乎毫无意义，但它应该将某些东西的宽度设置为适合内容的最小值。实际上，即使您将宽度设置为1％，如果内容为200像素宽，则将以最小宽度200像素显示。有些人还会添加“white-space:nowrap”属性，但这取决于情况是否需要。问候。 - JeanValjean

太棒了。在阅读了五十篇帖子并建议使用伪元素来解决问题后，我仍然知道必须有一种正确的方法。 - Adam Mackler

Answer 3

如果您的菜单项是动态生成的（因此您不知道有多少个），那么您可以将 style="width:xx" 属性添加到 li（或在顶部的 <style> 中... 或者放在任何地方）。其中 xx 应该是 width_of_parent_div_in_px/number_of_elements+'px' 或者 100/number_of_elements+'%'。这些 li 也应该是块级元素，并且向左 float。

- mpen

---

谢谢，这似乎是一个干净的解决方案，但是生成项目的代码不是我的，如果不使用JavaScript，我将无法设置样式。很抱歉之前没有提到这一点。 - Alpha

四年后又偶然来到这里。由于您正在使用JavaScript和现在的jQuery，您可以执行以下操作：var listId = $('#listId'); var listItems = listId.children('li'); var listItemCount = listItems.length; listItems.css('width',listId.width/listItemCount + 'px'); - Richard Christensen

Answer 4

#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.
}

如果你一行有5个元素，考虑到边框和填充，宽度：18%可能是合适的。但是这将因为你有多少元素、填充有多少而有所不同。

- Gordon Gustafson

---

你知道，我不认为他所说的是他的本意，关于“填满整个页面”（height: 100%）。我认为 - 我可能完全错误 - 他只是指水平方向。用导航填满整个页面听起来就是不对的=/ - David Thomas

高度：100%是指li标签和ul标签。可以推测他已经将ul标签设置为特定的高度，或者有另一个具有特定高度的包裹元素。高度：100%只是确保它占用所有可用空间。 - Ballsacian1

没错，当提到“填满整个页面”时，我指的是水平方向，之前没有表述清楚非常抱歉。已经编辑了问题。谢谢！ - Alpha

我建议在li内的链接上设置填充（如果它是菜单），因为这会增加可点击区域。 - Jonas Stensved

Answer 5

如果您愿意使用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。你可以在这里查看Flexbox的浏览器支持情况。

- L84

Answer 6

这是对我有效的解决方案：

#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;
}

- Mark

---

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