如何将 li 元素扩展到容器大小

Question

我有以下 HTML：

#main-menu {
  background-color: blue;
  border: 1px solid black;
  width: 600px;
}
.menu {
  list-style: none outside none;
  text-align: center;
}
.menu-item {
  float: left;    
}
.menu-item a {
  border: 1px solid red;  
}

<div id="main-menu">
    <ul class="menu">
        <li class="menu-item"><a href="#">Item #1</a></li>
        <li class="menu-item"><a href="#">Item #2</a></li>
        <li class="menu-item"><a href="#">Item #3</a></li>
        <li class="menu-item"><a href="#">Item #4</a></li>
    </ul>
</div>

如何使 li 元素自动扩展到容器的固定宽度？

提前感谢！ ：-(

代码笔链接：http://codepen.io/anon/pen/JoKgXz

Answer 1

我已经更新了你的代码笔代码。

.CSS

#main-menu {
  background-color: blue;
  border: 1px solid black;
  width: 600px;
  overflow: hidden;
}
ul, li{
  margin:0;
    padding:0;
}
.menu {
  list-style: none outside none;
  text-align: center;
}
.menu-item {
  float: left; 
  width:25%;
}
.menu-item a {
  border: 1px solid red;  
}

演示

Answer 2

确保具有正确的 CSS 重置并使用 box-sizing:border-box 属性。

此选项的优点是不需要在li上设置宽度

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#main-menu {
  background-color: blue;
  border: 1px solid black;
  width: 600px;
}
.menu {
  list-style: none outside none;
  text-align: center;
  display: table;
  width: 100%;
}
.menu-item {
  display: table-cell;
}
.menu-item a {
  border: 1px solid red;
  color: white;
  display: block;
}

<div id="main-menu">
  <ul class="menu">
    <li class="menu-item"><a href="#">Item #1</a>
    </li>
    <li class="menu-item"><a href="#">Item #2</a>
    </li>
    <li class="menu-item"><a href="#">Item #3</a>
    </li>
    <li class="menu-item"><a href="#">Item #4</a>
    </li>
  </ul>
  </d

Answer 3

首先从.menu中删除所有边距和填充。由于菜单中有四个项目，因此请将width: 25%添加到.menu-item。我在<a>标签中添加了一个display: block，使其填充.menu-item的整个宽度。当您使用float: left菜单项时，菜单项不会使.menu容器增长。.menu:after添加了一个清除修复程序，使菜单包含所有菜单项。

与其float: left您还可以选择display: inline-block。在这种情况下，clearfix 不是必需的，但您需要确保菜单项之间没有任何空格(例如换行符(。像...</li><li>...一样将它们放在一行上，否则菜单项之间会有一些空间。

如果您需要在菜单项上进行一些填充，请确保添加box-sizing: border-box否则宽度将仅指内容。这意味着在添加填充后，菜单项将占用宽度的 25% 以上，这使得最后一个菜单项换行到新行。

#main-menu {
  background-color: blue;
  border: 1px solid black;
  width: 600px;
}
.menu {
  list-style: none;
  text-align: center;
  margin: 0;
  padding: 0;
}
.menu:after {
  content: '';
  display: block;
  clear:both;
}
.menu-item {
  float: left;
  width: 25%;
}
.menu-item a {
  display: block;
  border: 1px solid red;  
}

<div id="main-menu">
    <ul class="menu">
        <li class="menu-item"><a href="#">Item #1</a></li>
        <li class="menu-item"><a href="#">Item #2</a></li>
        <li class="menu-item"><a href="#">Item #3</a></li>
        <li class="menu-item"><a href="#">Item #4</a></li>
    </ul>
</div>