Question

我有一个div坐在另一个div里面，内部div的背景颜色不会延伸到css中div的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都值得赞赏....

Answer 1

尝试在CSS中进行此更改：

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

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

1 个答案: