要让CSS中的li元素横向显示，常用方法有两种：一是将li设置为inline-block，如li{display:inline-block;}，使其像行内元素一样横向排列，同时保留块级特性可设置宽高；二是使用flex布局，父容器设置ul{display:flex;}，li会自动横向排列，且可灵活调整对齐（justify-content）和间距（gap），flex布局更现代，支持响应式，推荐优先使用，需注意inline-block可能产生空白间隙，可通过设置父容器font-size:0解决；float布局也可实现，但需清除浮动，易引发布局问题，不推荐。
CSS实现li横向显示的常用方法与技巧
在网页布局中,<li>元素作为列表项，默认情况下是纵向排列的（块级元素特性），但在实际开发中，我们常需要将列表项横向排列，比如导航栏、标签页、横向菜单等场景，本文将详细介绍CSS中实现<li>横向显示的几种常用方法，包括原理、代码示例及优缺点分析，帮助你灵活应对不同布局需求。
使用 display: inline-block（行内块元素法）
原理
默认情况下,<li>是块级元素（display: block），会占据一整行，通过将<li>的display属性设置为inline-block，可以让它变成行内块元素——既具有行内元素的特性（可以与其他行内元素在同一行显示），又具有块级元素的特性（可以设置宽、高、内外边距等）。
代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
ul {
list-style: none; /* 去除列表默认的圆点标记 */
margin: 0;
padding: 0;
}
li {
display: inline-block; /* 核心：将li设置为行内块元素 */
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #4CAF50;
color: white;
margin-right: 10px; /* 设置li之间的间距 */
}
</style>
</head>
<body>
<ul>
<li>首页</li>
<li>产品</li>
<li>服务</li>
<li>关于我们</li>
</ul>
</body>
</html>
优缺点
优点：
- 兼容性好（支持IE8及以上及所有现代浏览器）；
- 可直接设置
li的宽高、边距等属性，灵活性较高； - 代码简洁直观,易于理解和维护。
缺点：
- 会产生元素间隙：由于HTML中换行或空格导致的，
li之间会出现默认的空白间隙（可通过font-size: 0或margin: -2px等技巧解决，但会增加代码复杂度）； - 对齐方式不够灵活,难以实现垂直居中等复杂布局。
解决间隙问题的技巧
/* 方法1：设置父元素字体大小为0 */
ul {
font-size: 0;
}
li {
font-size: 14px; /* 恢复li内的字体大小 */
}
/* 方法2：使用负边距 */
li {
margin-right: -4px; /* 根据实际情况调整 */
}
使用 float: left（浮动布局法）
原理
float属性会让元素脱离标准文档流，并向左（float: left）或向右（float: right）浮动，直到遇到父元素的边界或另一个浮动元素，通过将<li>设置为左浮动，可以让它们在同一行从左到右排列。
代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
ul {
list-style: none;
margin: 0;
padding: 0;
/* 清除浮动的方法1：使用overflow */
overflow: hidden;
}
li {
float: left; /* 核心：让li向左浮动 */
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #2196F3;
color: white;
margin-right: 10px;
}
</style>
</head>
<body>
<ul>
<li>首页</li>
<li>产品</li>
<li>服务</li>
<li>关于我们</li>
</ul>
</body>
</html>
优缺点
优点：
- 兼容性极佳（支持IE6及以上及所有现代浏览器）；
- 适合早期布局方案（如多列布局）；
- 对浏览器性能影响较小。
缺点：
- 需要手动清除浮动（否则父元素可能高度塌陷，影响后续布局）；
- 浮动元素会脱离文档流,可能对周围元素造成布局干扰（如margin穿透问题）；
- 布局不够灵活,难以实现复杂的对齐方式。
清除浮动的多种方法
/* 方法1：使用伪元素（推荐） */
ul::after {
content: "";
display: block;
clear: both;
}
/* 方法2：使用overflow */
ul {
overflow: hidden;
}
/* 方法3：使用clearfix类 */
.clearfix::after {
content: "";
display: table;
clear: both;
}
使用 Flexbox（弹性布局法）
原理
Flexbox（弹性盒子布局）是CSS3中专门用于一维布局（行或列）的强大方案，通过设置父容器（<ul>）为display: flex，子元素（<li>）会自动排列在同一行，并且提供了丰富的对齐和分布控制选项。
代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex; /* 核心：将ul设置为弹性容器 */
/* 可选的对齐方式 */
justify-content: space-between; /* 两端对齐 */
align-items: center; /* 垂直居中 */
}
li {
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #FF9800;
color: white;
margin-right: 10px;
/* 最后一个元素去掉右边距 */
&:last-child {
margin-right: 0;
}
}
</style>
</head>
<body>
<ul>
<li>首页</li>
<li>产品</li>
<li>服务</li>
<li>关于我们</li>
</ul>
</body>
</html>
优缺点
优点：
- 布局灵活,支持多种对齐方式（
justify-content、align-items等）； - 自动处理换行和间距,无需手动计算；
- 兼容性良好（IE10+及所有现代浏览器）；
- 代码简洁,易于维护。
缺点：
- 在旧版浏览器中需要添加前缀（-webkit-、-moz-等）；
- 对于简单的布局可能显得"杀鸡用牛刀"。
Flexbox常用属性
/* 父容器属性 */
ul {
display: flex; /* 弹性容器 */
flex-direction: row; /* 主轴方向（默认row） */
justify-content: flex-start; /* 主轴对齐 */
align-items: center; /* 交叉轴对齐 */
flex-wrap: nowrap; /* 换行方式（默认nowrap） */
}
/* 子元素属性 */
li {
flex: 1; /* 占用剩余空间 */
align-self: flex-end; /* 单独对齐 */
order: 2; /* 排序顺序 */
}
使用 Grid（网格布局法）
原理
CSS Grid布局是二维布局系统，特别适合创建复杂的网格布局，通过设置父容器为display: grid，可以轻松实现<li>的横向排列，同时提供更强大的布局控制能力。
代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
ul {
list-style: none;
