CSS 问题中 li{display:inline;}的作用

发布时间：2023-09-06 02:04责任编辑：彭小芳关键词：CSS

<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;

width:120px;
font-size:15px;
border-right:1px white solid;
color:white;
padding:3px 8px;
}

a:hover{

}

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>

li{display:inline;}的作用是把li转换成内联元素显示。
　　li默认为块级元素，一个li会独自占据一行，display:inline会把块级元素转换成内联元素，内联元素大小会根据内容多少而变换，且不会自动换行。
　　把内联元素转换成块级元素可以用display:block。

原文地址：https://www.cnblogs.com/weikeqi/p/9311720.html

CSS 问题 中 li{display:inline;}的作用

知识推荐

CSS 问题中 li{display:inline;}的作用