1

基本的なページレイアウトを作り始めたところ、よくわからない問題がまた出てきました。ページの左側にあるリスト ボックスが他のリスト ボックスよりも上にあるのはなぜですか? どんな情報でも大歓迎です。ありがとう

<html>

<head>
<style>
body{
background-color:#5187B9;
font-size:120%;
color:#666666;
}
li{
list-style:none;
}
#wrapper{
margin:0 auto;
width:960px;
}
.top{
width:100%;
}
.block01{
clear:both;
background-color:white;
border-radius:4px;
border:1px solid white;
}
.menu{
width:100%;
height:45px;
padding-top:5px;
background-color:#E8EFF6;
}
.menu ul{
height:40px;
margin-left:20px;
}
.menu li{
float:left;
margin-left:5px;
margin-right:5px;
padding:5px;
background-color:#8888F6;
color:#277098;
}
.block02{
clear:both;
width:100%;
color:white;
}
.block02 ul{
width:100%;
clear:both;
color:black;
}
.block02 li{
float:left;
height:300px;
width:120px;
border-radius:4px;
border:1px solid white;
background-color:white;
}
.block02 ul .list02{
margin-left:20px;
margin-right:20px;
}
.block03{
clear:both;
width:100%;
background-color:white;
padding:10px;
}
</style>
</head>

<body>
<div id="wrapper">
<div class="top">
</div>
    <div class="block01">
    <div class="menu">
    <ul>
    <li>ホーム&lt;/li>
    <li>特徴</li>
    <li>プラン&lt;/li>
    </ul>
    </div>

    </div>

    <div class="block02">
    <ul>
    <li class="list01"></li>
    <li class="list02"></li>
    <li class="list03"></li>
    </ul>
    </div>

    <div class="block03">

    </div>

</div>

</body>
</html>
4

3 に答える 3

4

を取り外しclear:bothます.block02 ul

于 2013-03-19T08:22:34.623 に答える
2

これはclear、CSS のプロパティが原因です。

clear プロパティは、要素のボックスのどの辺が以前のフローティング ボックスに隣接していない可能性があるかを示します。

clearプロパティを削除すると、必要な結果が生成されます。

フィドル

PS : 高さを に変更しました250px。

于 2013-03-19T08:24:59.643 に答える
0

.block02 ul の margin-top を 0 に設定してみてください

于 2013-03-19T08:29:55.547 に答える