我正在创建一个简单的页面。当我在父 div 中创建子 div 时，它继承了背景，但是当我尝试将子 div 向右浮动时，它失去了继承的背景并变成白色。我可能会错过什么？我的 fiddle 是 here
我的CSS代码在这里
#fullwidth{
width: 100%;
/* background: url(../images/bg.jpg);*/
background-color: black;
background-repeat: repeat;
position: relative;
top: 0;
}
#fullwidth .container{
width: 994px;
position: relative;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
text-align: left;
background: transparent;
}
#fullwidth .test{
float: right;
}
我的div在这里
<div id="fullwidth">
<div class="container">
<div class="test">
<ul id='header_nav'>
<!--li><img src="images/home-icon.png" /></li-->
<li><a href="../design.php">Design</a>
<ul>
<li><a href="../designproducts.php">Products</a></li>
</ul>
</li>
<li><a href="../events.php">Events</a>
<ul>
<li><a href="../eventsservices.php">Services</a></li>
<li><a href="../eventsgallery.php">Gallery</a></li>
</ul>
</li>
<li><a href="../pr.php">Public Relations</a>
</li>
<li><a href="../outdoor.php">Media and Outdoor</a>
<ul>
<li><a href="../outdoorservices.php">Services</a></li>
<li><a href="../outdoorgallery.php">Gallery</a></li>
</ul>
</li>
<li><a href="../production.php">Production</a>
<ul>
<li><a href="../productionservices.php">Services</a></li>
<li><a href="../productiongallery.php">Gallery</a></li>
</ul>
</li>
<li><a href="../login.php">Login</a>
<ul>
<!--li>Register</li-->
</ul>
</li>
</ul>
</div>
</div>
</div>
最佳答案
添加这个
HTML
<html>
<head>
</head>
<body>
<div id="fullwidth">
<div class="container">
<div class="test">
<ul id='header_nav'>
<!--li><img src="images/home-icon.png" /></li-->
<li><a href="../design.php">Design</a>
<ul>
<li><a href="../designproducts.php">Products</a></li>
</ul>
</li>
<li><a href="../events.php">Events</a>
<ul>
<li><a href="../eventsservices.php">Services</a></li>
<li><a href="../eventsgallery.php">Gallery</a></li>
</ul>
</li>
<li><a href="../pr.php">Public Relations</a>
</li>
<li><a href="../outdoor.php">Media and Outdoor</a>
<ul>
<li><a href="../outdoorservices.php">Services</a></li>
<li><a href="../outdoorgallery.php">Gallery</a></li>
</ul>
</li>
<li><a href="../production.php">Production</a>
<ul>
<li><a href="../productionservices.php">Services</a></li>
<li><a href="../productiongallery.php">Gallery</a></li>
</ul>
</li>
<li><a href="../login.php">Login</a>
<ul>
<!--li>Register</li-->
</ul>
</li>
</ul>
</div>
</div>
<div class="cler"></div>
</div>
</body>
CSS
.cler{
clear:both;
}
在你的最后一个 div 子端
------------ 第二个选项是
写这个css
#fullwidth:after{
content:'';
clear:both;
overflow:hidden;
display:table;
}
关于html - Css 无法应用于子 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13835955/