元素未擴展100％，背景色消失了
[英]element not extending 100% and background color gone
問題描述
我正在研究html和CSS，目前正在使用此代碼。 一切都很好。 我一點一點地添加代碼，然后它沒有按預期工作。 這是代碼：
<!doctype html>
<html lang="en-us">
<head>
<title>Home</title>
<style>
nav, header{ display: block;
}
nav[role="navigation"]{
background-color: red;
font-family: Helvetica;
text-transform: uppercase;
width: 100%;
}
nav[role="navigation"] li{
float: left;
}
nav[role="navigation"] li a:hover {
color: #fff;
}
nav[role="navigation"] ul {
margin: 0px;
}
nav[role="navigation"] a {
float: left;
margin: 0.625em 2em .625em 0;
text-decoration: none;
}
header{
background: #e3e0d9;
}
#container {
width: 95%;
/* 10px / 16px top
10px / 948px right and left
24px / 16px bottom
*/
padding: 0.625em 1.05% 1.5em;
margin: 0 auto;
background-color: yellow;
}
aside{
float: right;
background-color: cyan;
/* 300px / 948px */
width: 31.64%;
}
aside img, .main img, .slats img{
width: 100%; /* occupy 100% of container */
max-width: 100%;
}
ul.tags li{
float: left;
font-size: 14px;
margin: 0 5px 5px 0;
}
ul.tags li a{
background: #9D0000 url(tag-bg.png) no-repeat 0 50%;
color: #fff;
float: left;
font-weight: normal;
padding: 5px 10px 6px 25px;
}
.main{
background-color: pink;
float: left;
/* 624px / 948px */
width: 65.82%;
/* 24px / 948px */
margin-right: 2.53%;
}
</style>
</head>
<body id="top">
<!-- start of navigation-->
<nav role="navigation">
<div class="inner">
<ul class="nav">
<li class="active"><a href="#">Football</a></li>
<li><a href="#">Baseball</a></li>
<li><a href="#">Soccer</a></li>
<li><a href="#">Tennis</a></li>
<li><a href="#">Ice Soccer</a></li>
<li><a href="#">Basketball</a></li>
</ul>
</div>
</nav>
<!--end of navigation-->
<!--start of header-->
<header role="banner">
<div class="inner">
<h1 class="logo"><a href="#"><img src="logo.png" alt="YetAnotherSportsSite" /></a></h1>
</div>
</header>
<!--end of header-->
<!-- start of container -->
<div id="container">
<!-- start of article -->
<article class="main" role="main">
<h1>That guy has the ball</h1>
<p class="summary">In what has to be considered a development of the utmost importance, that man over there now has the ball.</p>
<p class="articleinfo">By Rick Boucher | <time>January 1, 2012</time></p>
<section>
<img src="images/football.jpg" alt="Football" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan felis quis nibh pretium tempus. Nullam quis rhoncus massa. Vivamus laoreet convallis sem ac dapibus. Donec varius congue sem ac molestie. Nam purus neque, tincidunt ut aliquam dapibus, dictum a magna. Curabitur sagittis mi et ante aliquet tristique vitae nec justo. Quisque id tellus et quam pharetra lacinia nec id eros. Praesent fermentum dui id tellus aliquam tincidunt. Suspendisse eu ante sed est vestibulum dictum at sit amet nulla. Sed sed leo at ante consequat ullamcorper. Fusce mattis, justo sed eleifend bibendum, nunc risus pharetra est, ut rutrum libero justo et leo. Maecenas felis orci, porttitor eu venenatis vel, posuere in arcu. Phasellus sagittis pretium purus, vel semper massa aliquet sit amet.</p>
<p>In hac habitasse platea dictumst. Sed vitae libero et dui lobortis accumsan et non nisi. Suspendisse commodo purus vitae risus rutrum eget scelerisque erat vehicula. Nullam eu nunc purus. Nulla rutrum laoreet magna eu pharetra. In libero dolor, varius sed tempor quis, tempus a turpis. Nullam suscipit, nisi a cursus viverra, sapien dolor scelerisque mauris, auctor mattis leo ante auctor enim. Suspendisse nec sodales risus. Donec suscipit, justo eu tincidunt venenatis, metus odio rhoncus quam, mollis accumsan diam eros quis lectus.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean facilisis placerat dolor ut mattis. Duis vitae sem sapien. Vivamus orci mauris, ornare in fringilla vitae, pulvinar ut orci. Fusce pellentesque leo id arcu varius elementum. Vivamus id odio ac sapien pulvinar rutrum ut vitae libero. Nam eget rutrum mauris.</p>
<p>Curabitur ultrices dictum eros sed dignissim. Nam blandit iaculis tincidunt. Proin semper, arcu in cursus tincidunt, orci neque congue nunc, eu sodales enim diam eu ligula. Donec condimentum consequat convallis. Sed id est nisi, eleifend gravida justo. Sed consectetur posuere magna sit amet imperdiet. Vestibulum rhoncus nisl vel sapien viverra eget feugiat magna cursus. Nullam scelerisque ultricies lacus vel sodales. Aliquam felis magna, interdum placerat viverra non, sodales eget augue. In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent nec neque quis odio hendrerit auctor nec vel erat. In ullamcorper nulla sed ipsum elementum varius. Morbi et sapien ac nisl suscipit tincidunt. Sed lacus nisl, tempus vel ultrices vel, vulputate a nunc. Suspendisse in diam vitae nulla tempor vulputate quis ac nunc.</p>
<p>Nam in dui eget augue malesuada adipiscing ac at massa. In sed auctor libero. Quisque egestas mollis lobortis. Vivamus lacinia metus at quam posuere condimentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam ipsum mauris, facilisis ut pharetra ut, lacinia vitae velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris imperdiet facilisis ligula, sed pharetra metus malesuada sed. Suspendisse tristique massa in magna posuere adipiscing. Ut semper magna facilisis justo dapibus vel auctor odio imperdiet. Donec non nulla fermentum erat condimentum ultrices et vel augue. Aenean aliquam neque ut nisi scelerisque sagittis. Phasellus quam odio, hendrerit et viverra sed, pellentesque vitae est. Praesent consequat, neque nec interdum accumsan, nibh lorem hendrerit arcu, et posuere nunc massa ac augue. Nam justo augue, consectetur sit amet tempus sit amet, faucibus ut magna. Donec semper, mi in adipiscing tincidunt, justo purus suscipit libero, dictum iaculis arcu augue a arcu.</p>
<p>Aliquam feugiat venenatis porttitor. Fusce feugiat, arcu tristique cursus dignissim, magna nulla facilisis tortor, sed rutrum nisl dolor a augue. Etiam a ornare libero. Fusce massa nulla, gravida nec volutpat eleifend, venenatis nec nunc. Nam pulvinar iaculis ligula a luctus. Fusce vulputate odio id purus dictum placerat. Nullam condimentum, sem ac mattis congue, mi enim interdum risus, id rhoncus velit neque et magna.</p>
<p>Pellentesque vestibulum rhoncus sollicitudin. Cras eget purus velit. Donec et quam elit, sed interdum diam. Fusce a dolor a elit tincidunt dictum et non orci. Integer aliquam vehicula elit at vehicula. Nam nec magna libero. Maecenas porttitor, tortor eget congue lobortis, dolor ligula cursus nulla, eget luctus sem tellus ultrices orci. Sed posuere egestas pretium. Fusce id arcu eu lectus suscipit malesuada et vel libero. Mauris nunc felis, auctor eu malesuada sed, elementum non felis. Praesent pellentesque suscipit commodo. Suspendisse commodo accumsan nisl ut consequat. Curabitur porta sapien a dolor facilisis in bibendum nibh rutrum. Nulla enim magna, dapibus sed auctor ac, pulvinar eu quam.</p>
</section>
</article>
<!-- end of article -->
<!-- start of aside -->
<aside>
<section class="related">
<h2>Related Headlines</h2>
<ul>
<li><a href="#">That Guy Knocked Out the Other Guy</a></li>
<li><a href="#">Your Favorite Sports Team Lost. Again.</a></li>
<li><a href="#">The Yankees Buy the Entire League</a></li>
<li><a href="#">Guy Says Something Stupid in the Heat of the Moment</a></li>
<li><a href="#">New Record Set as Neither Team Scores</a></li>
<li><a href="#">Why Haven't You Clicked One of Our Headlines Yet?</a></li>
</ul>
</section>
<section class="ad">
<img src="images/ad.png" alt="Boombox ad unit" />
</section>
<section class="article-tags">
<h2>Tagged</h2>
<ul class="tags">
<li><a href="#">Football</a></li>
<li><a href="#">Ball</a></li>
<li><a href="#">Field</a></li>
<li><a href="#">Upset</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Winning</a></li>
</ul>
</section>
<section class="soundbites">
<h2>Sound Bites</h2>
<blockquote>
..this much is clear to me. If I were in his
shoes, I would have already won 5 Super Bowls.
<cite><a href="#">-Guy with big ego</a></cite>
</blockquote>
<blockquote>
You play to win the game! Or at least, not to lose too badly.
<cite><a href="#">—Easy going coach</a></cite>
</blockquote>
</section>
</aside>
<!-- end of aside -->
<!-- start of more-stories -->
<div class="more-stories">
<h2>More in Football</h2>
<ul class="slats">
<li class="group">
<a href="#">
<img src="images/ball.jpg" alt="Look, it's a ball" />
<h3>kicker connects on record 13 field goals</h3>
</a>
</li>
<li class="group">
<a href="#">
<img src="images/goal_post.jpg" alt="And now, a goal post!" />
<h3>Your favorite team loses to that team no one likes</h3>
</a>
</li>
<li class="group">
<a href="#">
<img src="images/ball_field.jpg" alt="This ball is laying a field!" />
<h3>The Scarecrows Win 42-0</h3>
</a>
</li>
</ul>
</div>
<!-- end of more-stories -->
</div>
<!-- end of container -->
</body>
</html>
為什么nav寬度不再是100％，而是變成red ，並且header現在漂浮在它旁邊？
2 個解決方案
解決方案1
1 已采納 2014-11-16 00:10:35
您正在浮動導航中的元素，但從未清除浮動：
添加此規則以強制清除浮動的<li>元素
nav[role="navigation"] ul:after {
content : " ";
display: block;
height:0px;
clear:both;
float:none;
visibility: hidden;
}
為什么要清除浮子？ 在這里閱讀
關於浮點數的更令人困惑的事情之一是它們如何影響包含它們的元素（它們的“父”元素）。 如果此父元素只包含浮點元素，則其高度實際上將崩潰為零。 如果父母不包含任何視覺上可察覺的背景，這並不總是很明顯，但是要意識到這一點很重要。
解決方案2
0 2014-11-16 00:09:18
nav[role="navigation"] li{
display: inline-block;
}
當子元素具有背景色並且瀏覽器縮小不到100％時，CSS邊框消失
[英]CSS border disappears when child element has a background color AND browser is zoomed out less than 100%
動畫背景顏色以通過html元素上的顏色過渡時會導致100％的CPU負載
[英]Animating background color to transition through colors on html element causes 100% cpu load
絕對定位元素不隨可滾動內容延伸（過去100％）
[英]Absolute positioned element not extending with scrollable content (past 100%)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.