0

次のコード: http://6.470.scripts.mit.edu/css_exercises/exercise5.html

<html>
<head>
<style type="text/css">
.wrapper1 {
    width: 65%;
    margin: 0px auto 0px auto;
    border: 1px solid;
    text-align: center;
    background: #eeeeee;
}
.wrapper2 {
    clear: left;
    width: 80%;
    margin: auto;
    border: 1px solid;
    background: #111111;
}
.p1 {
    margin: 20px;
    font-size: 70px;
}
.p2 {
    font-size: 50px;
}
.link-gr {
    list-type: none;
}
.link-gr li{
    float: left;
}
.link-gr li a{
    display: block;
    width: 100px;
}
</style>
</head>
<body>
<div class="wrapper1">
    <div class="wrapper2">
<p class="p1">MIT 6.470</p>
<p class="p2">Learn Web Programming this IAP</p>
<ul class="link-gr">
<li><a href="">Comprehensive Curriculum</a></li>
<li><a href="">Insightful Guest Lectures</a></li>
<li><a href="">Interaction with Sponsors</a></li>
<li><a href="">$30,000+ in Total Prizes</a></li>
</ul>
</div>
Copyright © 2012 MIT 6.470
</div>
</body>

ul.link-gr リンクが div の外に出ています。つまり、リンクを除くすべてが div.wrapper2 内に境界線と黒っぽい背景でラップされますが、リンクはボックスの外側に配置されます (outcast-ed のように)。これは非常に奇妙です。あなたの側からのいくつかの説明は高く評価されます。

ありがとう

4

2 に答える 2

0

これは問題だと思いますfloat: あなたのコードには

.link-gr li{
    float: left;
}

問題は、そのコンテナーが ではないfloat: leftことです。つまり、リスト項目はどこにでも自由に移動できます。同様に追加float: leftしてみてください：.link-gr

.link-gr{
    float: left;
}

これで問題が解決する場合があります。フィドル: http://jsfiddle.net/abZHK/1/

于 2013-03-29T18:05:49.083 に答える
0

あぁ浮く…

説明

PIE のこの古い記事を参照してください: Clearing floats (IE/Win は IE バージョン 6 です)

解決

この最新のclearfixを適用します(含まれていないフロートの親に)

于 2013-03-29T18:10:40.807 に答える