CSS：对齐两个元素，在同一行没有浮动的左侧和右侧 [英] CSS: align two element, to the left and right in the same line without 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，一个跨度和一个链接。我想让span与左对齐，并将链接向右对齐。

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：对齐两个元素，在同一行没有浮动的左侧和右侧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！