使用 css 实现 ul 横向 排列 的方法有：1. 将 li 设为 inline-block，保留块特性且同行显示；2. 用 Float:left 使 li 左浮动，需注意 清除浮动 ；3. 推荐使用display:flex，布局简洁且响应式友好；4. 需重置 ul 默认padding 和 list-style，兼顾兼容性与 移动端适配。
要让 html 中的无序列表（ul）横向 排列，主要通过 CSS 来控制样式。以下是几种常用的实现方法，简单实用。
1. 使用 display: inline 或 inline-block
将列表项 li 设置为内联或内联块元素，可以让它们在同一行显示。
示例代码：
HTML:
<ul class=”inline-list”>
<li> 首页 </li>
<li> 产品 </li>
<li> 服务 </li>
<li> 关于 </li>
</ul>
CSS:
.inline-list li {
display: inline-block;
margin-right: 10px;
}
.inline-list {
padding-left: 0;
list-style: none;
}
说明：使用 inline-block 比单纯的 inline 更好，便于设置宽高和间距。
2. 使用 float 布局
通过浮动使每个列表项向左排列，形成横向布局。
立即学习 “ 前端免费学习笔记（深入）”；
CSS 示例：
.float-list li {
float: left;
margin-right: 15px;
list-style: none;
}
注意：使用 float 后，父元素可能需要 清除浮动 ，避免影响后续布局。可添加 overflow: hidden 到 ul 或使用 伪类 清除。
3. 使用 Flex 弹性布局（推荐）
现代 网页布局 推荐使用 Flex，简洁且响应式友好。
CSS 示例：
.flex-list {
display: flex;
list-style: none;
padding: 0;
}
.flex-list li {
margin-right: 20px;
}
Flex 布局自动对齐，支持主轴、交叉轴控制，适配移动端更方便。
4. 注意事项
去除默认样式： ul 默认有 padding 和 list-style，建议重置。
兼容性： inline-block 和 float 兼容老 浏览器 ；flex 推荐用于现代项目。
响应式处理： 在小屏幕中可考虑换行或隐藏部分菜单。
基本上就这些。选择哪种方式取决于你的项目需求。如果是新项目，直接用 flex 最省心。
