ul默认块级导致垂直堆叠，横排需设display:inline-block或父容器用flex；推荐wrapper包裹后设inline-block并清除间距/列表符号，或直接对共同父容器设flex布局。
ul 默认是块级元素，直接并排会换行
浏览器里 ul 默认 display: block，所以三个 ul 写在一起会垂直堆叠。想让它们横着排，得手动改显示模式。
最稳妥的做法是用 display: inline-block —— 兼容性好、行为可预测、不会像 float 那样引发父容器塌陷。
常见错误现象：
– 直接写 ul { display: inline }：文字对齐错乱，li 项可能挤成一行
– 只给 ul 加 float: left：父容器高度丢失，后续内容上浮
– 用 flex 但没包一层容器：三个 ul 是兄弟节点，不加 wrapper 无法统一 flex 布局
推荐方案：用 wrapper + display: inline-block
把三个 ul 包进一个 div，再给每个 ul 设 display: inline-block，同时清除默认的上下间距和列表符号干扰。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 给每个
ul加margin: 0; padding: 0; list-style: none; - 设置
vertical-align: top，避免因行内基线对齐导致高低不一 - 控制宽度（比如
width: 30%），防止内容多时换行 - 如果需要间隙，用
margin-right，别依赖空格或换行符（HTML 中的空白符会被合并）
简短示例：
<div class="ul-row"> <ul><li>A</li><li>B</li></ul> <ul><li>C</li><li>D</li></ul> <ul><li>E</li><li>F</li></ul> </div>
.ul-row ul {
display: inline-block;
vertical-align: top;
margin: 0;
padding: 0;
list-style: none;
width: 30%;
}
Flex 布局更现代，但要注意父容器
如果目标浏览器支持 Flex（IE10+，主流浏览器都 OK），用 display: flex 更干净，不用处理基线、空白符、清除浮动这些边角问题。
关键点：
- 必须作用在三个
ul的**共同父容器**上，不能只设在单个ul上 - 默认
flex-direction: row，已满足横向排列 - 加
gap: 1rem比用margin控制间隔更安全（不会影响首尾外边距） - 如果
ul内容长度差异大，加align-items: flex-start防止底部不对齐
示例：
.ul-row {
display: flex;
gap: 1rem;
align-items: flex-start;
}
容易被忽略的细节：字体大小和换行
哪怕用了 inline-block 或 flex，如果 ul 或其父容器设置了 font-size: 0（常见于清除 inline 元素间隙的 hack），会导致里面文字不可见；或者 white-space: nowrap 意外触发，让 li 横向溢出。
还有两个实际踩坑点：
-
ul里有长文本且没设word-break或max-width，整列会被撑宽甚至换行 - 某些 CSS 重置库（如 normalize.css）会改
ul的margin-block，在 flex 容器里可能造成意外偏移
检查时优先看 computed styles 里的 display 和 box-sizing，而不是只盯着 HTML 结构。
