Blogger平台H2/H3/H4标签背景适配文本宽度的CSS解决方案求助

我明白你想要的效果：让H2/H3/H4的背景只包裹文本内容，而不是撑满整个页面宽度。用inline-block确实能实现宽度自适应，但它经常会带来一些排版问题（比如标题和后续内容跑到同一行、垂直对齐异常等），这应该就是你遇到的图2里的问题。

这里有两个可靠的解决方案，你可以根据实际情况选择：

方案1：优化inline-block的表现 #

如果坚持用inline-block，只需要补充几个属性就能解决排版问题：

.post-body h2, .post-body h3, .post-body h4 {
    background-color: #333333;
    width: auto;
    padding: 10px 20px;
    color: #FFF;
    display: inline-block; /* 保持宽度自适应 */
    margin: 5px 0 15px;
    border-bottom: 1px solid $(post.line);
    clear: both; /* 确保标题独占一行，不会和浮动元素同行 */
    vertical-align: top; /* 修正垂直对齐问题 */
    box-sizing: border-box; /* 让padding不会额外增加宽度 */
}

clear: both能强制标题换行，避免和页面中的浮动元素（比如图片、侧边栏）挤在同一行；vertical-align: top则可以解决inline-block元素默认基线对齐导致的偏移问题。

方案2：用display: table实现更稳定的自适应 #

display: table是个更稳妥的选择，它既能让背景自适应文本宽度，又自带块级元素的特性（默认独占一行），不会出现inline-block的排版副作用：

.post-body h2, .post-body h3, .post-body h4 {
    background-color: #333333;
    width: auto;
    padding: 10px 20px;
    color: #FFF;
    display: table; /* 关键属性，自适应宽度且独占一行 */
    margin: 5px 0 15px;
    border-bottom: 1px solid $(post.line);
    box-sizing: border-box;
}

这个方案的兼容性非常好，几乎所有浏览器都支持，而且不需要额外处理对齐或换行问题，是我更推荐的做法。

你可以先试试第二个方案，应该能完美解决你的问题，如果还有其他细节需要调整，随时告诉我。

内容的提问来源于stack exchange，提问作者user3037905