1

私は CSS にまったく慣れていないので、自分でこのページを再作成することにしました。

しかし、次の問題に遭遇しました。

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 要素の背景が緑色でないことです。フロートに何か問題があると思いますが、修正方法がわかりません。私はclear:bothほとんどどこにでも置いてみましたが、緑色のものは何もありませんでした。:(

手伝ってくれませんか？前もって感謝します！

4

3 に答える 3

2

これには追加の DIV は必要ありません。overflow: hidden;に追加.top_navigation

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

ワーキングデモ

于 2012-10-18T06:51:12.280 に答える
1

浮動要素にサイズ変更するにclear:bothは、 の最後に要素が必要です。<nav>

<nav class="top_navigation">
    <ul>
       ...
    </ul>
    <aside>
       ...
    </aside>
    <div style="clear:both;"></div>
</nav>

(これは単なる例です。もちろん、そのためにインライン スタイルを使用しないでください)

例: http://jsfiddle.net/7gWEu/

于 2012-10-18T06:52:19.420 に答える
1

あなたのLI要素は浮かんでいるので、UL bgの高さは0です。したがって、いくつかのオプションがあります

CSS の「Clear Fix」は、これを解決する 1 つの方法です。

CSS:

.cf:before, .cf:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}
.cf:after {
  clear: both;
}
.cf {
  *zoom: 1;
}

HTML:

   <ul class="cf">
         <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>

例: http://jsfiddle.net/8UDVw/1/

または、LI の高さが変わらないことがわかっている場合は、UL の高さを手動で設定できます。

.top_navigation ul{height:30px;}
于 2012-10-18T06:49:56.300 に答える