CSS 水平菜单 - 等距？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1203910/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS horizontal menu - equally spaced?
提问by Alpha
I have a standard CSS menu, made with UL and LI tags. I need them to get to cover the whole page, horizontally (not my real case, but I'll take this to simplify the situation). However, the items are created dynamically and so I'm not able to hardcode any with to LI items, nor margins.
我有一个标准的 CSS 菜单，用 UL 和 LI 标签制作。我需要它们水平地覆盖整个页面（不是我的真实案例，但我会以此来简化情况）。但是，这些项目是动态创建的，因此我无法将任何与 LI 项目或边距硬编码。
I've seen solutions using JavaScript to set those values but I would really love to avoid them.
我已经看到使用 JavaScript 来设置这些值的解决方案，但我真的很想避免它们。
Lastly, I've seen a pretty good solution which is setting
最后，我看到了一个很好的解决方案，它是设置
#menu {
width: 100%;
/* etc */
}
#menu ul {
display: table;
}
#menu ul li {
display: table-cell;
}
This will create the desired behavior in most browsers... except for IE.
这将在大多数浏览器中创建所需的行为......除了 IE。
Any ideas?
有任何想法吗？
EDIT: Thanks for the responses. However, as the code that generates the items isn't mine, I'm not able to set inline styles when creating them without using JavaScript later.
编辑：感谢您的答复。但是，由于生成项目的代码不是我的，我无法在以后不使用 JavaScript 创建它们时设置内联样式。
回答by
You can't set the height or width of an inline element. http://www.w3.org/TR/CSS2/visudet.html#inline-width
您不能设置内联元素的高度或宽度。http://www.w3.org/TR/CSS2/visudet.html#inline-width
Try display:inline-block;
尝试 display:inline-block;
here is the fix for ie:
这是 ie 的修复：
display:inline-block;
zoom:1;
*display:inline;
回答by JeanValjean
If you want to let the element get the whole available space, there is no need to define a priorithe width of the menu elements (of course, it will help in equally sizing the li elements). You can solve this problem by working on the displayproperty.
如果您想让元素获得整个可用空间，则无需先验定义菜单元素的宽度（当然，这将有助于对 li 元素进行同等大小的调整）。您可以通过处理该display属性来解决此问题。
#menu{
display: table;
width: 100%;
}
#menu > ul {
display: table-row;
width: 100%;
}
#menu > ul >li {
display: table-cell;
width:1%
}
Note that width:1%is requiredto avoid cell collapsing.
请注意，这width:1%是避免单元格崩溃所必需的。
回答by mpen
If your menu items are being dynamically generated (so you don't know how many there will be prior) then you can add a style="width:xx"attribute to the lis (or in <style>at the top... or where ever you please, really). Where xxshould either by width_of_parent_div_in_px/number_of_elements+'px', or 100/number_of_elements+'%'. The lis should also be block-level elements, and floated left.
如果您的菜单项是动态生成的（因此您不知道之前会有多少个），那么您可以将style="width:xx"属性添加到lis（或在<style>顶部...或您喜欢的任何地方，真的）。哪里xx应该由width_of_parent_div_in_px/number_of_elements+'px', 或100/number_of_elements+'%'. 的liS还应该block-电平的元件，并且float编辑left。
回答by L84
If you are open to using Flexbox then it isn't hard to do. Full credit for the code I am about to post goes to CSS Tricksas this is their CSS.
如果您愿意使用 Flexbox，那么这并不难。我即将发布的代码完全归功于CSS Tricks，因为这是他们的 CSS。
Below is an example that includes vendor prefixes.
下面是一个包含供应商前缀的示例。
#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>The only issue with Flexbox is if you need to support IE 9 and below, otherwise, I see no reason to not use Flexbox. You can view browser support for Flexbox here.
Flexbox 的唯一问题是您是否需要支持 IE 9 及以下版本，否则，我认为没有理由不使用 Flexbox。您可以在此处查看浏览器对 Flexbox 的支持。
回答by Gordon Gustafson
#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.
}
The width: 18% may be about right if you have 5 elements across, accounting for border and padding. But it will vary due to how many elements you have, how much padding, etc.
如果您有 5 个元素，则 width: 18% 可能是正确的，占边框和填充。但它会因您拥有的元素数量、填充量等而有所不同。
回答by Mark
Here's what worked for me:
以下是对我有用的内容：
#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;
}
