图⽂详解如何让ul中的li元素横向排列（附代码）
在页⾯布局时，我们经常会⽤到li标签，因为li标签⽤途很⼴泛，它可以⽤来制作列表，选项卡，导航等等。但是<ul>标签⾥的li默认情况下是纵向排列的，那我们可不可以让li横向排列呢？这篇⽂章就给⼤家介绍两种⽅法，来实现HTML中ul列表横向排列。有需要的朋友可以参考⼀下，希望对你有⽤。
ul列表的横向排列在导航中⽤得⽐较多，接下来就通过横向导航实例来讲讲如何⽤CSS让ul横向排列。
注意：
1、li列表前⾯默认有⼩圆点，有时候为了美观需要去掉多余的⼩圆点，可以使⽤CSS中的list-style:none这个属性，当然也可以在列表
前⾯加⼀些图⽚。
2、为了让页⾯更具有吸引⼒，导航⼀般都会⽤到伪类元素，最常见的就是hover，它可以实现⿏标经过导航时，改变导航的背景颜
⾊，字体⼤⼩，图⽚等等。
3、巧妙使⽤CSS中的display属性。如果需要让li具有⾼度和宽度，并且需要调节菜单内容的位置，必须将display属性值设置为
block，将其变成块级元素后，padding,text-align等属性才起作⽤。
⼀、display:inline 实现ul横向排列
⽤ul li做⼀个横向导航，实现⿏标经过时，背景颜⾊改变。代码如下：
HTML部分：
<ul id="nav">
<li><a href="#">⾸页</a></li>
<li><a href="#">课程介绍</a></li>
<li><a href="#">师资⼒量</a></li>
<li><a href="#">新闻动态</a></li>
<li><a href="#"></a></li>
</ul>
CSS部分：
<style type="text/css">
#nav {
margin: 50px auto;
height: 40px;
background-color: #690;
}
#nav ul {
list-style: none;
margin-left: 50px;
}
#nav li {
display: inline;
}
#nav a {
line-height: 40px;
color: #fff;
text-decoration: none;
padding: 20px 20px;
}
#nav a:hover {
background-color: #060;
}
</style>
效果图：
⿏标经过的效果：
⼆、float：left 实现ul横向排列
⽤float：left 实现ul横向排列，li浮动以后会脱离标准流，且不占位置，如果它的⽗级元素有具体的样式且没有固定宽⾼，还需要对⽗元素清除浮动，或者设置固定宽⾼。HTML部分和上⾯⼀样，CSS部分如下所⽰：
html ul标签<style type="text/css">
#nav {
height: 40px;
margin-top: 50px;
background-color: #690;
}
#nav ul {
list-style: none;
margin-left: 50px;
}
#nav li {
display: block;
float: left;
}
#nav a {
line-height: 40px;
display: block;
color: #fff;
text-decoration: none;
padding: 0 20px;
}
#nav a:hover {
background-color: #060;
}
</style>
效果和上⾯⼀样，只是⽅法不⼀样。
总结：float:left和display:inline都可以实现ul li横向排列，具体选择什么⽅法，看个⼈习惯和项⽬需要吧，初学者可以⾃⼰动⼿尝试，希望可以帮助到你。
以上就是图⽂详解如何让ul中的li元素横向排列（附代码）的详细内容，更多请关注我

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。