Question

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

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

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

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

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

有什么想法吗？

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

Answer 1

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

尝试display:inline-block;

这是修复ie：

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

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% 是必需的，以避免单元格崩溃。

Answer 3

如果您的菜单项是动态生成的（因此您不知道之前会有多少），那么您可以向style="width:xx"添加li属性（或{{1}在顶部...或者你喜欢的地方，真的）。 <style>应该xx或width_of_parent_div_in_px/number_of_elements+'px'的位置。 100/number_of_elements+'%'也应为li - 级元素，block为float。

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％可能是正确的，占边框和填充。但它会因你有多少元素，填充多少等而有所不同。

Answer 5

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

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

＆＃13;

actionIndex($sort)

＆＃13;

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

＆＃13;

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

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

CSS水平菜单 - 等间距？

6 个答案: