关于css浮动的问题
<html><head><styletype="text/css">ul{float:left;width:100%;padding:0;margin:0;list-st...
<html>
<head>
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:7em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300}
li {display:inline}
</style>
</head>
<body>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
<p>
在上面的例子中，我们把 ul 元素和 a 元素浮向左浮动。li 元素显示为行内元素（元素前后没有换行）。这样就可以使列表排列成一行。ul 元素的宽度是 100%，列表中的每个超链接的宽度是 7em（当前字体尺寸的 7 倍）。我们添加了颜色和边框，以使其更漂亮。
</p>
</body>
</html>
这个代码实现后是这样的
但是为什么，我把a里面的浮动删除之后，
a
{
width:7em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
就变成了这样，
求解啊，大神们！为什么删了浮动之后，就会不连续了？连紫色框的长度都发生了变化？ 展开
<head>
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:7em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300}
li {display:inline}
</style>
</head>
<body>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
<p>
在上面的例子中，我们把 ul 元素和 a 元素浮向左浮动。li 元素显示为行内元素（元素前后没有换行）。这样就可以使列表排列成一行。ul 元素的宽度是 100%，列表中的每个超链接的宽度是 7em（当前字体尺寸的 7 倍）。我们添加了颜色和边框，以使其更漂亮。
</p>
</body>
</html>
这个代码实现后是这样的
但是为什么，我把a里面的浮动删除之后，
a
{
width:7em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
就变成了这样，
求解啊，大神们！为什么删了浮动之后，就会不连续了？连紫色框的长度都发生了变化？ 展开
2个回答
展开全部
首先得批评你一下，你完全不懂为什么要加浮动，然后就加了。所以你才找不到原因，因为你根本不理解，病急乱投医。
例如：ul为什么要浮动？li设置为行内后，里面a浮动做什么？
如果想写成一排，最好的办法是，li浮动，里面的a做个inline-block设置宽高（作用是整个区域都可以点击）。
然后ul上清除浮动。清除浮动可以去搜下clearfix。
这样才是有逻辑的，你写的代码没逻辑，你要是能弄懂那不是天才了？
至于为什么下面截图li中间有缝隙，这个可以搜一下inline-block的特性。
例如：ul为什么要浮动？li设置为行内后，里面a浮动做什么？
如果想写成一排，最好的办法是，li浮动，里面的a做个inline-block设置宽高（作用是整个区域都可以点击）。
然后ul上清除浮动。清除浮动可以去搜下clearfix。
这样才是有逻辑的，你写的代码没逻辑，你要是能弄懂那不是天才了？
至于为什么下面截图li中间有缝隙，这个可以搜一下inline-block的特性。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
a标签本是一个内联元素，设置float后就变成了块元素，可以设置宽、高等属性，你去掉floa后，它就默认为内联元素，其宽、高等属性失效，只会根据文本的宽度自动调节。当然你可加上这样的css语句：display:block;这样所设的宽度width:7em;就会有效了。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
