html - 如何将 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 元素自动等量扩展到容器的固定宽度？

提前致谢! :-)

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

Answer 1

我已经更新了你的 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