Question

我正在浏览其他相关的主题，但我找不到修复程序.. Div不会使用所选的背景颜色填充100％的屏幕，仅填充<li>的宽度 CSS：

#menuspace{
    background: #2175bc;padding:0;margin:0;width:100%;
}
#menubutton {
margin:0;
    padding: 0;
    width:100%;
}

#menubutton li {
    display: inline;
}

#menubutton li a {
    font-family: Arial;
    font-size:11px;
    text-decoration: none;
    float:left;
    padding: 10px;
    background: #2175bc;
    color: #fff;
}

HTML：

<div id="menuspace">
<ul id="menubutton">
<li><a href="http://www.example.net/">Home</a></li>
</ul></div>

Answer 1

问题是#menubutton li a上的'float：left'。删除它，div将100％的屏幕。浮点使父div菜单空间认为其中确实没有包含内容（div实际上是100％但没有高度）。您也可以将浮动放在那里，只需添加一些内容：

<div id="menuspace">
<ul id="menubutton">
<li><a href="http://www.example.net/">Home</a></li>
</ul>Look the div goes to 100% now</div>

Answer 2

试试这个小提琴 -

小提琴：http://jsfiddle.net/8LFLd/

演示：http://jsfiddle.net/8LFLd/embedded/result/

注意：我已在<a>标记上添加了鼠标悬停，以便它看起来更好。

Answer 3

#menubutton li a中有一个浮点数，所以你必须清除他的父亲#menubutton。所以，写这样：

#menubutton{
 overflow:hidden;
}

Answer 4

将菜单空间的css更改为：

#menuspace{ 
    background: #2175bc;padding:0;margin:0;overflow:auto;
}

你遇到这个问题的原因是因为浮标：留在li标签上。 overflow：auto on parent元素将清除浮点数（或者你可以在ul之后添加一个空div并设置样式以清除：两者都在其上）。

Answer 5

至少有两种解决方法。

浮动#menuspace。（fiddle）
在ul申请float: none; clear: both后添加空div。（fiddle）

可能有更多方法可以完成您所追求的目标（如上文其他人所述）。

Answer 6

看到这个

http://jsfiddle.net/U5JFE/2/

Answer 7

嗨，你不需要给出宽度，所有它将自动采取宽度深入细节检查它我的例子简单：

http://jsfiddle.net/U5JFE/7/

宽度100％未填满屏幕

7 个答案: