你是不是经常在写网页的时候遇到这种情况：明明只是想在页面中间放几个列表项，结果 <ul> 一出来就自动顶到最左边，上下还挤出一大段空白，宽度直接跟父盒子一样长？别慌，这其实是浏览器在按规矩办事。你这句话非常准确——<ul> 根本不是行内标签，它是一个货真价实的块级元素。它天生就习惯“独占一行”，并且会把父容器的可用宽度撑满。
咱们可以把它想象成教室里的长条桌。每来一张桌子，后面的同学就得另起一行坐。<ul> 就是那张长条桌，它不跟别人挤座位。哪怕里面只有一行字，它也会老老实实地占满整排。这和 <span>、<a> 这种行内元素完全不同：行内标签更像课桌上并排摆的课本，能挨着放；而 <ul> 是整张桌子，必须单独划地盘。
打开浏览器的开发者工具看一眼 <ul> 的计算样式，你会发现它背后藏着一套“出厂设置”。拿一段最普通的 HTML 来说：
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
在没有任何自定义 CSS 干预的情况下，主流浏览器默认会给它套上类似这样的规则：
/* 各浏览器默认值略有差异，这里以常见桌面浏览器为参考 */
ul {
display: block; /* 块级显示，决定文档流行为 */
margin-top: 16px; /* 上方自带外边距 */
margin-bottom: 16px; /* 下方自带外边距 */
padding-left: 40px; /* 左侧缩进，给小圆点留位置 */
list-style-type: disc; /* 默认用实心圆点做项目符号 */
}
注意那个 padding-left: 40px。很多人第一次见到列表偏右，以为是 margin 造成的，其实不是。那是浏览器为了让左侧的小圆点不被父容器边缘切掉，特意预留的内边距。这也是为什么有时候你给 <ul> 加了 background-color，却发现背景没贴着左边——不是背景失效了，而是 padding 把内容推开了。
至于“撑满父容器宽度”，这得从盒模型和正常文档流说起。块级元素在文档流里的宽度默认是 width: auto。这个 auto 可不是“自适应内容”，对块级元素来说，它的含义是“把左右两边都填满”。所以只要父容器有 800px 宽，<ul> 就会乖乖变成 800px，不会因为内容只有两个字就缩成一小截。你可以把它理解成水往低处流：块级元素在垂直方向上自然堆叠，在水平方向上自然铺满。
当然，网页设计从来不是死守默认值。很多时候我们就是要让 <ul> 乖乖听话。比如做顶部导航栏，开发者通常会这样处理：
.nav-menu {
display: flex;
gap: 20px;
list-style: none; /* 关掉默认小圆点 */
padding: 0; /* 清零左侧内边距 */
margin: 0; /* 清零上下外边距 */
}
.nav-menu li {
/* 在 flex 布局下，li 会自动变成弹性子项，不需要额外改 display */
}
这里做了三件小事：清零默认的间距，关掉列表符号，再用 flex 把子项排成一行。你会发现，一旦父容器脱离了传统的块级独占模式，整个布局就活过来了。而且因为用了 flex，子项还能自动等分、对齐、换行，比早年用 float 或 inline-block 省事得多。
新手最容易踩的坑有两个。第一个是把 <ul> 当成行内元素，试图用 display: inline 强行塞进去，结果发现上下间距还在，或者文字换行了。第二个是忘了清 padding-left，导致列表内容跟父容器左边之间永远隔着一段洗不掉的空白。遇到这种情况，直接在开发者工具里临时把 padding-left 改成 0，瞬间就能看清问题在哪。记住，浏览器自带的样式就像校服，刚穿上不太合身很正常，CSS 的作用就是把校服换成你喜欢的衣服。
如果你要给小朋友解释这件事，可以这么说：HTML 就像搭积木。<div>、<p>、<ul> 这些块级元素，每一块积木都必须自己躺平占一整排；而 <span>、<img>、<a> 这些行内元素，可以像小石子一样排成一排。<ul> 就是一块长方形的大积木，它上面印着“我要整排”，所以它一出来，后面的东西只能排队到下一行去。想让它不独占一行？那就拿胶水把它粘起来，或者换一种搭法。
顺便提一句，现代前端开发里，<ul> 的语义价值比它的展示形式更重要。哪怕你把它的样式改成横向菜单、网格卡片、甚至垂直时间轴，它本质上仍然是一个“无序列表”。屏幕阅读器读网页时，会专门识别 <ul> 告诉视障用户：“这里有 3 个项目的列表”。所以别为了省事把 <ul> 全换成 <div>，语义对了，代码才站得住脚，搜索引擎也更容易读懂你的页面结构。
下面给你一段可以直接跑起来的完整示例，看看默认状态和重置后的对比。把这段代码保存成 .html 文件，双击打开就能亲眼看到同一个 <ul>，因为外层容器和 CSS 的不同，呈现出完全不同的姿态：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ul 默认行为与样式重置演示</title>
<style>
body {
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
padding: 24px;
max-width: 720px;
margin: 0 auto;
line-height: 1.6;
color: #222;
}
h3 { margin-bottom: 8px; }
.demo-box {
background: #f7f7f9;
border: 1px dashed #ccc;
padding: 16px;
margin-bottom: 28px;
border-radius: 8px;
}
/* 默认 ul：什么都不改，让浏览器展示原始行为 */
.default-ul {
/* 无自定义样式，完全使用浏览器默认值 */
}
/* 重置后的 ul：导航栏/标签云风格 */
.reset-ul {
display: flex;
flex-wrap: wrap;
gap: 10px;
list-style: none;
padding: 0;
margin: 0;
}
.reset-ul li {
background: #ffffff;
border: 1px solid #b8d4f5;
padding: 8px 16px;
border-radius: 6px;
font-size: 14px;
}
.note {
font-size: 13px;
color: #666;
margin-top: 6px;
}
</style>
</head>
<body>
<h3>浏览器默认样子</h3>
<div class="demo-box">
<ul class="default-ul">
<li>第一步：打开网页</li>
<li>第二步：检查样式</li>
<li>第三步：调整布局</li>
</ul>
<p class="note">注意：左侧有 40px 缩进，上下有默认间距，宽度撑满灰色区域。</p>
</div>
<h3>CSS 重置后的样子</h3>
<div class="demo-box">
<ul class="reset-ul">
<li>第一步：打开网页</li>
<li>第二步：检查样式</li>
<li>第三步：调整布局</li>
</ul>
<p class="note">注意：圆点消失，间距清零，子项横向排列，但 ul 本身仍然是块级元素。</p>
</div>
</body>
</html>
写 CSS 其实就是在跟浏览器的默认习惯“谈判”。理解了 <ul> 为什么独占一行、为什么自带缩进、为什么撑满宽度，后面碰到 <ol>、<dl>、<table> 甚至自定义组件，思路都会顺很多。下次再看到列表突然跳到下一行，或者怎么调宽度都不听使唤，先别急着怪代码，打开开发者工具看一眼 Computed 面板，答案通常就躺在那些默认属性里。