12

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

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

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

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

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

有任何想法吗？

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

4

6 回答 6

14

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

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

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

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

请注意，这width:1% 是避免单元格崩溃所必需的。

于 2012-08-23T17:05:31.050 回答
14

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

尝试display:inline-block;

这是ie的修复：

display:inline-block;
zoom:1;
*display:inline;
于 2009-09-08T18:43:23.217 回答
4

如果您的菜单项是动态生成的（所以您不知道之前会有多少），那么您可以style="width:xx"向 s 添加一个属性li（或者在<style>顶部......或者您喜欢的任何地方，真的）。应该在哪里xxbywidth_of_parent_div_in_px/number_of_elements+'px'或100/number_of_elements+'%'。lis 也应该是级别block元素，并且floated left。

于 2009-07-30T01:10:04.793 回答
1 
#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% 可能是正确的，考虑到边框和填充。但它会因你有多少元素、多少填充等而有所不同。

于 2009-07-30T01:04:23.620 回答
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。您可以在此处查看浏览器对 Flexbox 的支持。

于 2015-07-01T03:53:19.163 回答
0

这对我有用：

#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;
}
于 2011-12-05T18:16:42.150 回答