关于HTML中的ul对象使用css式样中的float属性后，显示效果问题
HTML中的ul对象使用css式样中的float属性，li用display:inline，结果列表后紧跟的段落p会另起一行显示，而不是跟列表在同一行显示，为什么？附上代码...
HTML中的ul对象使用css式样中的float属性，li用display:inline，结果列表后紧跟的段落p会另起一行显示，而不是跟列表在同一行显示，为什么？ 附上代码，请教懂得来解答下
<html>
<head>
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:5em;
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>为了显示出链接区域，我们为链接添加了背景色。</p>
<p>请注意，全部链接区域都是可点击的，不仅仅是文本。</p>
</body>
</html>
为什么去掉ul的float:left后，段落“为了显示出链接区域，我们为链接添加了背景色
”就紧跟列表在同一行显示，而加上会另起一行显示？ 展开
<html>
<head>
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:5em;
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>为了显示出链接区域，我们为链接添加了背景色。</p>
<p>请注意，全部链接区域都是可点击的，不仅仅是文本。</p>
</body>
</html>
为什么去掉ul的float:left后，段落“为了显示出链接区域，我们为链接添加了背景色
”就紧跟列表在同一行显示，而加上会另起一行显示？ 展开
展开全部
ul
{
float:left;
width:100%;
/*你的ul宽度是100%，那么它就是单独占用一行的，其他的再有标签只能是换下一行了 ，另外p标签默认宽度也是100%*/
padding:0;
margin:0;
list-style-type:none;
}
你要想让他们三个都在一行的话，你就把ul的宽度是100%去掉，然后把p标签也加上左浮动
{
float:left;
width:100%;
/*你的ul宽度是100%，那么它就是单独占用一行的，其他的再有标签只能是换下一行了 ，另外p标签默认宽度也是100%*/
padding:0;
margin:0;
list-style-type:none;
}
你要想让他们三个都在一行的话，你就把ul的宽度是100%去掉，然后把p标签也加上左浮动
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
如果要实现在一排显示的话：
1、添加样式：*{padding:0;margin:0;}
2、取消ul宽度100%；
3、p标签添加左浮动：float：left；（不让其独占一行）；
1、添加样式：*{padding:0;margin:0;}
2、取消ul宽度100%；
3、p标签添加左浮动：float：left；（不让其独占一行）；
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
Vue实践-CSS样式position/display/float属性对比使用
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
