0

私が作成している簡単なページがあります。親 div 内に子 div を作成すると、背景が継承されますが、子 div を右にフロートしようとすると、継承された背景が失われ、白くなります。何が欠けている可能性がありますか？私のフィドルはここにあります

私の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>
4

2 に答える 2

1

これを追加

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の子の終わりに

デモ

---------- 2番目のオプションは

このcssを書きます

#fullwidth:after{
content:'';
    clear:both;
    overflow:hidden;
    display:table;
}

デモ-2

于 2012-12-12T08:52:18.357 に答える