在前端页面布局中，不同样式的文字往往需要保持在同一行内显示，比如页面顶部的导航文字、商品卡片的价格与单位、文章标题和标签组合等场景。这些文字可能设置了不同的字号、颜色、字重甚至字体，如果直接排列很容易出现换行或者垂直对齐混乱的问题，需要通过合适的CSS属性来控制排版效果。
核心实现原理
要让不同样式的文字保持行内显示，核心是保证所有文字元素都属于行内级元素，或者手动设置元素的显示类型为行内级。HTML中默认的行内元素包括<span>、<a>、<em>、<strong>等，这些元素本身就会在同一行内排列，不会自动换行。如果是块级元素包裹的文字，就需要修改其<code>display</code>属性。
基础行内元素使用
最基础的方式是使用默认的<span>标签包裹不同样式的文字，再通过CSS给每个<span>设置不同的样式，由于<span>是行内元素，天然就会保持行内显示。
<div class="text-group"> <span class="title">热门推荐</span> <span class="sub-title">精选优质内容</span> <span class="tag">NEW</span> </div>
对应的CSS样式如下，三个<span>会默认在同一行显示：
.title {
font-size: 20px;
font-weight: bold;
color: #333;
}
.sub-title {
font-size: 14px;
color: #666;
margin-left: 8px;
}
.tag {
font-size: 12px;
color: #fff;
background-color: #ff4d4f;
padding: 2px 6px;
border-radius: 4px;
margin-left: 8px;
}
块级元素转行内显示
如果文字被块级元素比如<div>、<p>包裹，这些元素默认会占满整行，导致文字换行。此时需要设置<code>display: inline</code>或者<code>display: inline-block</code>来让元素变为行内级元素。其中<code>inline</code>不能设置宽高，<code>inline-block</code>可以保留块级元素的宽高设置能力，同时和其他行内元素排列在同一行。
<div class="price-group"> <div class="price">99.9</div> <div class="unit">元/件</div> </div>
.price-group {
font-family: Arial;
}
.price {
display: inline-block;
font-size: 24px;
color: #ff4d4f;
font-weight: bold;
}
.unit {
display: inline-block;
font-size: 14px;
color: #999;
margin-left: 4px;
}
垂直对齐问题处理
不同样式的文字往往字号、行高不同，即使保持了行内显示，也容易出现垂直方向对齐错乱的问题，比如大字号文字偏上，小字号文字偏下。此时需要使用<code>vertical-align</code>属性来调整垂直对齐方式。
<code>vertical-align</code>的常用取值包括：
- baseline：默认值，元素基线与父元素基线对齐
- middle：元素中线与父元素中线对齐，适合需要居中对齐的场景
- top：元素顶部与行内最高元素顶部对齐
- bottom：元素底部与行内最低元素底部对齐
比如下面的例子，大字号标题和小字号副标题默认对齐会偏上，设置<code>vertical-align: middle</code>后可以实现垂直居中：
<div class="header"> <span class="main-title">前端开发教程</span> <span class="sub-desc">从入门到实战</span> </div>
.main-title {
font-size: 22px;
font-weight: bold;
vertical-align: middle;
}
.sub-desc {
font-size: 14px;
color: #666;
margin-left: 10px;
vertical-align: middle;
}
常见场景示例
带图标文字行内显示
很多场景中文字前面会搭配图标，图标通常用<i>或者<img>标签实现，也需要保持行内显示：
<div class="notice"> <i class="icon-warn"></i> <span class="notice-text">当前活动仅限新用户参与</span> </div>
.icon-warn {
display: inline-block;
width: 16px;
height: 16px;
background-color: #faad14;
border-radius: 50%;
vertical-align: middle;
}
.notice-text {
font-size: 14px;
color: #666;
margin-left: 6px;
vertical-align: middle;
}
文字与输入框行内组合
表单场景中，文字提示和输入框需要保持行内显示，此时输入框是行内替换元素，本身可以和其他行内元素排列，只需要调整对齐即可：
<div class="form-item"> <label class="form-label">用户名：</label> <input type="text" class="form-input" placeholder="请输入用户名" /> </div>
.form-label {
font-size: 14px;
color: #333;
vertical-align: middle;
}
.form-input {
width: 200px;
height: 32px;
padding: 0 8px;
border: 1px solid #ddd;
border-radius: 4px;
vertical-align: middle;
margin-left: 8px;
}
注意事项
首先需要避免给行内元素设置过大的上下外边距，因为行内元素的上下外边距不会生效，只会增加水平方向的空间。其次如果文字内容过长，需要设置父容器的<code>white-space: nowrap</code>来防止自动换行，或者根据需求设置<code>text-overflow: ellipsis</code>实现溢出省略。最后如果使用了浮动属性，元素会脱离文档流，无法保持自然的行内排列，需要清除浮动或者改用行内布局方案。
行内显示文字样式CSSinlinevertical-align修改时间：2026-06-10 14:16:08