使用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 布局
通过浮动使每个列表项向左排列，形成横向布局。
立即学习“前端免费学习笔记（深入）”；
.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 最省心。
