Question

我有一个菜单栏，它不会延伸它所在的div的整个长度。我有6个主菜单选项，我希望这些选项可以延伸到它们所在的整个div标签，而不仅仅是占用它们单词的间距。我试图将div和菜单元素设置为100％宽度，但没有任何效果。我的代码列在下面。

CSS

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

li {
    float: left;
}

a:link,a:visited {
    display: block;
    width: 100%;
    font-weight: bold;
    color: #FFFFFF;
    background-color: #98bf21;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
}

a:hover,a:active {
    background-color: #7A991A;
}

.testmenu {
    width: 100%;
}

HTML

<div class="testmenu">
   <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#news">News</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#about">About</a></li>
   </ul>
</div>

Answer 1

以下是我根据您的代码编辑的内容：

http://jsfiddle.net/fatgamer85/grLkE/

我在列表和列表项中添加了几个类。我已经使列表宽度100％填充区域（我假设菜单栏？），然后从列表项中删除浮动，使它们内联，并添加填充到项目

.menu-item{
    display: inline-block;
    padding: 2%;
}

这就是它的样子：

http://jsfiddle.net/fatgamer85/grLkE/embedded/result/

希望这有帮助。

Answer 2

更改

li{float:left;}

到

li{display:inline-block;width:25%;margin:0;padding:0;}

Fiddle here.

Answer 3

你可以给UL宽度100％，然后每个宽度为25％

你已编译的css给testmenu一个100％的宽度，然后你必须明确告诉UL和LI应该有多少宽度。

Answer 4

 ul {
     list-style-type: none;
     overflow: hidden;
 display:table-row;
 }

 li {
 display:table-cell;
 border:1px solid black;
 }

 a:link,a:visited {
     display: block;
     width: 100%;
     font-weight: bold;
     color: #FFFFFF;
     background-color: #98bf21;
     text-align: center;
     padding: 4px;
     text-decoration: none;
     text-transform: uppercase;
 }

 a:hover,a:active {
     background-color: #7A991A;
 }

 .testmenu {
     width: 100%;
 display:table;
 table-layout:auto;

 }

菜单栏不拉伸全长单元格

4 个答案: