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 中，但链接位于框外（如弃用）。这很奇怪。您的一些解释将不胜感激。

谢谢

4

2 回答 2

0

啊飘了...

解释

请参阅 PIE 的这篇旧文章：Clearing floats (IE/Win is IE version 6 there)

解决方案

应用这个现代的clearfix（在非包含浮动的父级上）

于 2013-03-29T18:10:40.807 回答
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 回答