在单行上左右对齐内联块
使用内联块时,精确对齐它们可能具有挑战性在一条线上。本文针对这个问题提供了两种解决方案:Flexbox 和文本对齐对齐。
Flexbox 解决方案
Flexbox 提供了一个优雅而简洁的解决方案。通过应用显示:flex;到父容器并对齐内容:空间之间;要对齐子元素,您可以轻松实现所需的对齐方式。
<code class="css">.header { display: flex; justify-content: space-between; }</code>
文本对齐对齐解决方案
使用文本对齐对齐是另一个可行的选择。下面是一个示例 CSS 代码,该代码将该技术与一些特定于浏览器的技巧相结合,以实现更好的兼容性:
<code class="css">.header { background: #ccc; text-align: justify; /* ie 7*/ *width: 100%; *-ms-text-justify: distribute-all-lines; *text-justify: distribute-all-lines; } .header:after{ content: ''; display: inline-block; width: 100%; height: 0; font-size:0; line-height:0; } h1 { display: inline-block; margin-top: 0.321em; /* ie 7*/ *display: inline; *zoom: 1; *text-align: left; } .nav { display: inline-block; vertical-align: baseline; /* ie 7*/ *display: inline; *zoom:1; *text-align: right; }</code>
此方法适用于不同的浏览器,包括 IE7 及更高版本。
请记住,如果内联块元素不是用空格分隔的,文本对齐对齐解决方案可能不起作用。此外,将父元素的 font-size 设置为 0 并将其重置回子元素所需的值可以帮助删除 after 伪元素引入的额外空间。
以上是如何在一行上左右对齐内联块?的详细内容。更多信息请关注PHP中文网其他相关文章!