说明

Question

以下代码来自：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）。这很奇怪。非常感谢您的一些解释。

由于

Answer 1

我认为这是float问题：您的代码包含

.link-gr li{
    float: left;
}

问题是它的容器不是float: left，这意味着列表项可以随意移动。尝试将float: left添加到.link-gr：

.link-gr{
    float: left;
}

这可以解决问题。小提琴：http://jsfiddle.net/abZHK/1/

Answer 2

啊花车......

说明

请参阅P.I.E的这篇旧文章：Clearing floats（IE / Win是IE版本6）

解决方案

应用此现代 clearfix （在不包含的花车的父级上）

css：链接组放在包含div之外

2 个答案:

说明

解决方案