如何在同一行上对齐内联块：Flexbox 与文本对齐？

在同一行上对齐内联块：综合解决方案

虽然在同一行上对齐内联块可能具有挑战性，但有一些有效的解决方案可用。让我们深入研究两种常用的方法。

选项 1：Flexbox

Flexbox 提供了一种简单而灵活的方法来实现所需的对齐。通过应用显示：flex；对于父容器，您可以使用 justify-content: space- Between; 操纵其子容器的位置。这种方法提供了出色的跨浏览器兼容性。

<code class="css">.header {
  display: flex;
  justify-content: space-between;
}</code>

选项 2：文本对齐

为了更广泛的浏览器支持，您可以利用 text-align: justify 技术以及 star-hacks旧版本的 Internet Explorer。

<code class="css">.header {
  background: #ccc;
  text-align: justify;
}

.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;
}</code>

此方法通过使用 :after 伪元素添加空元素来解决内联块元素之间缺乏分隔的问题：

<code class="css">.header:after {
  content: '';
  display: inline-block;
  width: 100%;
  ...
}</code>

到消除 :after 伪元素造成的额外空间，将父元素的 font-size 设置为 0，并将子元素重置为所需的值：

<code class="css">.header {
  font-size: 0;
}

h1, .nav {
  font-size: 14px;
}</code>

以上是如何在同一行上对齐内联块：Flexbox 与文本对齐？的详细内容。更多信息请关注PHP中文网其他相关文章！