在同一行水平对齐内联块

问题

内联块比浮动元素具有优势，例如基线对齐和自动居中当视口变窄时。然而，在同一行上水平对齐两个内联块可能会带来挑战。

内联块对齐的挑战

• 浮动可能会干扰基线对齐并导致不必要的环绕.
• 相对和绝对定位会导致间距问题，类似于浮动。

解决方案：使用文本对齐

一个有效的解决方案是利用文本对齐: 证明技巧:

CSS 代码

.header {
    text-align: justify;
    background: #ccc;
}

.header:after {
    content: '';
    display: inline-block;
    width: 100%;
    height: 0;
    font-size: 0;
    line-height: 0;
}

h1 {
    display: inline-block;
    margin-top: 0.321em;
}

.nav {
    display: inline-block;
    vertical-align: baseline;
}

说明

• 将父元素的text-align设置为“justify”，使文本在其宽度上均匀分布。
• 添加伪元素标题：after消耗内联块之间的剩余空间。
• 设置内联块 h1 和 .nav 以显示：内联块和垂直对齐：基线以保持其基线。