版式图鉴LAYOUT ATLAS ⌕ 搜索
行内布局 海报
№ 224

行内布局

定义 Definition

行内布局是将多个元素沿同一基线水平排列，形成连续、可读的信息流。

要目 Key Points
同一行元素在同一行中对齐，信息连续，易于快速浏览。
基线元素的视觉重心落在基线上，保持视觉对齐。
连续性从左到右形成自然的阅读连贯性。
用法 Application

适用于文本信息行、元数据行、状态与操作行；控制元素高度差异，注意间距节奏，保持信息权重清晰。

关键词 Keywords
行内布局基线对齐信息流
参见 Related
222 普通流布局223 块级布局225 流根布局
回忆评估 Review
看完海报，凭回忆作答——评分后排入复习队列
一级分类网页与 UI
二级主题CSS 流、定位与响应
本主题共21 个概念
高清原图 CDN 打开 ↗
学习路径 图鉴 · 研习两用
← 223 块级布局 225 流根布局 →

实况演示

Live Demo · 真实 HTML/CSS
独立页打开 ↗ 查看源码 ↗
关键 CSS fold / unfold 
/* ═══ 本 demo 自定义样式 ═══ */

.row { border: 1px dashed var(--line); padding: 12px; line-height: 2.4; margin-bottom: 12px; }
  .inline { display: inline; background: color-mix(in srgb, var(--accent) 14%, transparent);
            color: var(--accent); padding: 2px 6px; font-family: var(--mono); font-size: 11px; }
  .iblock { display: inline-block; background: var(--ink); color: var(--paper);
            padding: 8px 14px; font-family: var(--mono); font-size: 11px; margin: 2px 0; }

/* ═══ 共享令牌类 · demo 外壳已内置 ═══ */

.blk {
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border: 1px solid var(--line); border-radius: 2px;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--ink-2);
  padding: 10px; min-height: 34px;
}
.blk.acc {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent);
}
.blk.ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tag {
  display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  border: 1px solid var(--line); color: var(--ink-2); padding: 2px 8px;
  border-radius: 2px; background: var(--paper-2);
}
.card { background: var(--paper-2); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.card .cv { aspect-ratio: 16/10; background: color-mix(in srgb, var(--accent) 10%, var(--paper-2)); border-bottom: 1px solid var(--line); }
.card .bd { padding: 9px 10px; }
.card .bd .t { font-weight: 600; font-size: 12.5px; }
.card .bd .m { font-family: var(--mono); font-size: 10px; color: var(--ink-3); margin-top: 2px; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: color-mix(in srgb, var(--accent) 22%, var(--paper-2)); border: 1px solid var(--line);
}
.fake-text { height: 8px; background: color-mix(in srgb, var(--ink) 10%, transparent); border-radius: 1px; }
.fake-text.w60 { width: 60%; } .fake-text.w80 { width: 80%; } .fake-text.w40 { width: 40%; }
.fake-text + .fake-text { margin-top: 6px; }

同主题

查看全部 →