HTML，CSS - 背景颜色不会拉伸内部 Div 宽度的全长答案

【问题标题】：HTML, CSS - Background Color Doesn't Stretch the Full Length of Inner Div's WidthHTML，CSS - 背景颜色不会拉伸内部 Div 宽度的全长
【发布时间】：2014-05-18 08:50:56
【问题描述】：

我有一个 div 位于另一个 div 内部，内部 div 的背景颜色不会拉伸到由 div 在 css 中的 width 属性指定的全长。我尝试过使用 min-width:960px、width:100% 和 width:960px，但背景继续限制为 div 的内容。

这是css

#wrapper-content {
width:960px;
margin: 0 auto;
font-family:arial;
}

#header {
width: 960px;
height: 150px;
background: cyan;
}

#image-logo {
height:49px;
width:374px;
}

#menu-main {
width:960px;
background:blue;
}

#menu-main li {
    display:inline;
}

.menu-main-item {
    width:6em; 
    text-decoration:none; 
    float:left; 
    color:white; 
    background-color:blue; 
    padding:0.8em 0.6em 0.8em 2.4em;
}

这里是 HTML

<div id="wrapper-content"> <!--Beginning of Content Wrapper-->


<div id="header">

    <img id="image-logo" src="" alt="Image Logo">

    <span style="float:right; font-size:37px;">(888) 555-5555</span><br>
    <span style="float:right; font-size:16px">123 Anywhere Ave</span><br>
    <span style="float:right; font-size:16px">Somewhere, NY 10001</span>

</div>

<div id="menu-main">
<ul style="margin:0; padding:0;">
    <li><a class="menu-main-item" href="index">Home</a></li>
    <li><a class="menu-main-item" href="services">Services</a></li>
    <li><a class="menu-main-item" href="library">Library</a></li>
    <li><a class="menu-main-item" href="about">About</a></li>
    <li><a class="menu-main-item" href="contact">Contact</a></li>
</ul>
</div>

</div> <!--End of Wrapper-->

我还创建了一个 JSFiddle，例如：http://jsfiddle.net/P88e2/1/

ID 为#menu-main 的 div 具有深蓝色背景，不会一直延伸。将背景颜色拉伸到 div 的整个宽度的任何帮助表示赞赏....

【问题讨论】：

标签： css html width

【解决方案1】：

尝试在您的 CSS 中进行此更改：

#menu-main li {
    display: inline-block;
}

【讨论】：

感谢您的帮助和@Jorge_Torres。我希望我能对这两个答案都投赞成票，因为它们都运作良好。我选择这个是因为它修改了现有的行。我之所以选择这个，是因为它修改了现有的一行，而另一行添加了一个。