CSS:在同一行中左右对齐两个元素，WHITHOUT浮动 [英] CSS: align two element, to the left and right in the same line WHITHOUT floats

问题描述

我正在尝试将两个内联元素对齐，一个向左对齐，另一个向右对齐.我想在不使用浮点数的情况下完成此操作.

I am trying to align two inline elements, one to the left and one to the right. I'd like to accomplish this without using floats.

就我而言，我有一个h1，其中包含一个跨度和一个链接.我希望将跨度向左对齐，并将链接向右对齐.

In my case, I have a h1, with a span and a link. I'd like the span to align to the left and the link to align to the right.

http://jsfiddle.net/Lkfacta3/

h1>span {
  text-align: left;
}
h1>a {
  text-align: right;
}

 <h1><span>Align me left</span> <a href="">align me right</a></h1>

这是理想的结果:

推荐答案

您可以使用一些flexbox魔术:

You can use some flexbox magic:

h1 {
  display: flex;
  justify-content: space-between;
}

<h1>
  <span>Align me left</span>
  <a href="">align me right</a>
</h1>

这篇关于CSS:在同一行中左右对齐两个元素，WHITHOUT浮动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！