Question

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

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

Answer 1

如果是选项，请使用flexbox：

＆＃13;

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

＆＃13;

<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>

＆＃13;

在div的两侧放置跨度，不使用浮动

1 个答案: