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元素自动扩展到容器的固定宽度？

提前致谢！： - ）

CodePen链接：http://codepen.io/anon/pen/JoKgXz

Answer 1

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我已经更新了您的codepen代码..

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

Demo

Answer 3

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

此选项的优点是li

不需要设置宽度

＆＃13;

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

＆＃13;

<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

＆＃13;

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

3 个答案: