浮动后背景颜色不工作

问题描述

我真的很喜欢CSS，所以我决定尝试重新创建

I'm really new to CSS, so I decided to try to recreate this page on my own.

但我遇到了以下问题：

HTML

        <!-- Header -->
        <header>
            <h1>w3schools.com</h1>
            <img src="Images/w3schoolslogo.gif">

            <form method="post" action="w3_schools.html">
                <input type="text" name="search" placeholder="Search w3schools.com"/>
                <input type="submit" value="Search">
            </form>
        </header>
        <!---->

        <!-- Top navigation -->
        <nav class="top_navigation">
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">HTML</a></li>
                <li><a href="">CSS</a></li>
                <li><a href="">Javascript</a></li>
                <li><a href="">JQuery</a></li>
                <li><a href="">XML</a></li>
                <li><a href="">ASP.NET</a></li>
                <li><a href="">PHP</a></li>
                <li><a href="">SQL</a></li>
                <li><a href="">More...</a></li>
            </ul>

            <aside>
                <ul>
                    <li><a href="">References</a></li>
                    <li><a href="">Examples</a></li>
                    <li><a href="">Forum</a></li>
                    <li><a href="">About</a></li>
                </ul>
            </aside>
        </nav>
        <!---->

CSS

ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;

}

/* Header */
header {
    position: relative;
}

header h1 {
    display: none;
}

header form {
    position: absolute;
    bottom: 0px;
    right: 0px;
}

header form input[type="text"]  {
    border: 1px solid #D3D3D3;
}

/* Top navigation */
.top_navigation {
    clear: both;
    text-transform: uppercase;
    margin-top: 10px;
    font-size: 80%;
    background-color: green;
}

.top_navigation a:link, .top_navigation a:visited{
    color: #555555;
    text-decoration: none;
}

.top_navigation a:hover {
    color: red;
}

.top_navigation li {
    float: left;
    margin-left: 10px;
}

.top_navigation aside {
    float:right;
}

问题是nav元素的背景不是绿色。我想它有一些东西与浮动，但我不知道如何解决。我试着把清除：几乎到处都是，但没有绿色的。

The problem is that the background of the nav element is not green. I suppose that it has something with the float, but I have no idea how to fix. I've tried putting clear:both almost everywhere, but nothing green was there. :(

推荐答案

p>您不需要额外的DIV。添加 overflow：hidden; 到 .top_navigation

You don't need additional DIV for this. Add overflow: hidden; to .top_navigation

.top_navigation {
    text-transform: uppercase;
    margin-top: 10px;
    font-size: 70%;
    background-color: green; overflow: hidden;
}

这篇关于浮动后背景颜色不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！