在网页开发中，ul标签默认是纵向排列列表项的，每个li元素会独占一行。但实际场景中我们经常需要让ul里的li横向排列，并且在一行内显示不换行，比如顶部导航栏、商品标签栏等场景都需要这样的效果。接下来就介绍几种常用的实现方式。
方法一：使用flex布局实现
flex布局是目前最推荐的实现方式，代码简洁且兼容性较好，能够轻松控制子元素的排列方式和换行规则。核心是通过设置ul为flex容器，同时禁止换行即可。
/* 设置ul为flex容器，禁止子元素换行 */
ul.horizontal-flex {
display: flex;
flex-wrap: nowrap;
/* 可选：去除ul默认的内边距 */
padding-left: 0;
/* 可选：去除默认列表样式 */
list-style: none;
/* 可选：设置容器宽度，超出部分可滚动 */
width: 100%;
overflow-x: auto;
}
/* 设置li的样式，可选添加间距 */
ul.horizontal-flex li {
/* 防止li被压缩 */
flex-shrink: 0;
margin-right: 16px;
padding: 8px 12px;
background-color: #f5f5f5;
border-radius: 4px;
}
对应的HTML结构如下：
<ul class="horizontal-flex">
<li>首页</li>
<li>产品中心</li>
<li>解决方案</li>
<li>关于我们</li>
<li>联系我们</li>
<li>帮助中心</li>
</ul>
方法二：使用inline-block实现
这种方式是传统的CSS实现方案，通过将li设置为行内块元素，让多个li在同一行显示，同时设置ul的white-space属性禁止换行。
/* 设置ul禁止换行，去除默认样式 */
ul.horizontal-inline {
white-space: nowrap;
padding-left: 0;
list-style: none;
width: 100%;
overflow-x: auto;
}
/* 设置li为行内块元素 */
ul.horizontal-inline li {
display: inline-block;
margin-right: 16px;
padding: 8px 12px;
background-color: #f5f5f5;
border-radius: 4px;
}
这种方式的HTML结构和flex方案一致，只需要修改ul的class名称即可。需要注意的是，inline-block元素之间会有默认的空白间隙，可以通过设置ul的font-size为0，再给li设置合适的font-size来消除。
方法三：使用float浮动实现
浮动是更早的布局方式，通过给li设置左浮动，让元素横向排列，同时需要给ul添加清除浮动的样式，避免父元素高度塌陷。
/* 清除ul浮动，设置不换行相关属性 */
ul.horizontal-float {
/* 触发BFC，包裹浮动元素 */
overflow: hidden;
padding-left: 0;
list-style: none;
width: 100%;
white-space: nowrap;
}
/* 设置li左浮动 */
ul.horizontal-float li {
float: left;
margin-right: 16px;
padding: 8px 12px;
background-color: #f5f5f5;
border-radius: 4px;
}
这种方式的兼容性很好，但浮动布局的后续维护成本较高，如果后续需要调整排列顺序或者添加其他布局元素，容易出现样式问题，因此更推荐使用flex布局方案。
不同方案的对比
我们可以通过下面的表格对比三种方案的特点，方便选择合适的实现方式：
| 实现方案 | 代码复杂度 | 维护成本 | 推荐程度 |
|---|---|---|---|
| flex布局 | 低 | 低 | 高 |
| inline-block | 中等 | 中等 | 中 |
| float浮动 | 中等 | 高 | 低 |
注意事项
- 如果ul的宽度不足以容纳所有li，需要设置overflow-x: auto让容器支持横向滚动，避免内容被截断。
- 使用flex布局时，给li设置flex-shrink: 0可以避免li被容器压缩变形，保证每个li的宽度符合预期。
- 如果需要去除li默认的圆点样式，记得给ul设置list-style: none，同时去除默认的左内边距padding-left: 0。
- 如果使用的是inline-block方案，注意处理元素之间的默认空白间隙问题，避免布局出现意外的间距。