CSS 问题 中 li{display:inline;}的作用
<html><head><styletype="text/css">ul{list-style-type:none;width:100%;padding:0;margin...
<html>
<head>
<style type="text/css">
ul{
list-style-type:none;
width:100%;
padding:0;
margin:0;
float:left;
}
a{
text-decoration:none;
float:left;
background-color:green;
width:120px;
font-size:15px;
border-right:1px white solid;
color:white;
padding:3px 8px;
}
a:hover{
background-color:red;
}
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>
{diaplay:inline}应该是将块框设为内联元素对吗？如果是快框设置，那对a就没有做用了嘛？？？
这个CSS文件中，最后样式 li{display:inline;} 有什么作用呢？我删除了也是一样的效果哦。另外，讲a 的宽度加大，也不会在同一行了，换行了
求解，谢了 展开
<head>
<style type="text/css">
ul{
list-style-type:none;
width:100%;
padding:0;
margin:0;
float:left;
}
a{
text-decoration:none;
float:left;
background-color:green;
width:120px;
font-size:15px;
border-right:1px white solid;
color:white;
padding:3px 8px;
}
a:hover{
background-color:red;
}
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>
{diaplay:inline}应该是将块框设为内联元素对吗？如果是快框设置，那对a就没有做用了嘛？？？
这个CSS文件中，最后样式 li{display:inline;} 有什么作用呢？我删除了也是一样的效果哦。另外，讲a 的宽度加大，也不会在同一行了，换行了
求解，谢了 展开
4个回答
展开全部
li{display:inline;}的作用是把li转换成内联元素显示。
li默认为块级元素，一个li会独自占据一行，display:inline会把块级元素转换成内联元素，内联元素大小会根据内容多少而变换，且不会自动换行。
把内联元素转换成块级元素可以用display:block。
li默认为块级元素，一个li会独自占据一行，display:inline会把块级元素转换成内联元素，内联元素大小会根据内容多少而变换，且不会自动换行。
把内联元素转换成块级元素可以用display:block。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
display:inline 这个是和float联合使用的，调整兼容性使用到的！防止ie6中margin值加倍！
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
对这个没研究
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
Vue实践-CSS样式position/display/float属性对比使用
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
