将跨度放置在 div 的相对侧，而不使用浮动

Question

我在 div 中有一些跨度。我想要一个跨度，它包含一些字符串，在左侧，一个跨度在右侧包含一些很棒的字体图标。但是我不能使用浮点数，因为这些元素嵌套很深，会导致问题。还要注意宽度是有限的，有时如果字符串足够长，它可以断字。

<div>
<span>Some Long Text Here</span>
<span><i class="fa fa-bars"></i></span>
</div>

Answer 1

如果它是一个选项，请使用 flexbox :

div {
  line-height: 20px;
  padding: 15px;
  color: white;
  background: purple;
  /*Code flex*/
  display: flex;
}

span:first-child {
  flex:1 1 auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<div>
  <span>Some Long Text Here</span>
  <span><i class="fa fa-bars"></i></span>
</div><br>
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo quibusdam, iusto laboriosam ipsam quas impedit voluptatem fugiat rerum quis, minima velit nam accusantium beatae voluptas commodi eligendi molestiae dolorum reiciendis!</span>
  <span><i class="fa fa-home"></i></span>
</div>

将跨度放置在 div 的相对侧，而不使用浮动

Placing spans on opposite sides of div, without using float

html

css