如何确保图标与文本位于同一行，而不是新行？

Question

编辑：

我通过设置

将图标放在文本旁边

span{max-width:140px; display:block; float:left}

但现在跨度中的文字与li的底部重叠;它不再正确设置高度。

---

我有一个可扩展菜单，文本旁边有一个加号/减号图标。这就是它的样子：

<li class="category expandable">
    <span>Programs and Clinics</span>
    <a href="javascript:void(0)" class="show-second-level toggle" style="display: inline;">
        <i class="fa fa-plus"></i>
    </a>
    <a href="javascript:void(0)" class="hide-second-level toggle" style="display: none;">
        <i class="fa fa-minus"></i>
    </a>
</li>

我想确保展开图标始终与文本位于同一行，因为它看起来很糟糕，因为它在自己的行上。如果“诊所”必须向下移动到下一行没关系，但我怎样才能确保图标不会在文本下面自行结束？

Answer 1

您可以定位图片absolute并使用margin保留空间。

.category {
  border: 1px solid #000000;
  position: relative;
  width: 140px;
}
.category > span {
  margin-right: 30px;
  display: block;
}
.category a {
  display: block;
  width: 30px;
  height: 30px;
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
.category i.fa {
  background: url('https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1');
  width: 30px;
  height: 30px;
  display: block;
}

<li class="category expandable">
  <span>Programs and Clinics</span>
  <a href="javascript:void(0)" class="show-second-level toggle">
    <i class="fa fa-plus"></i>
  </a>
  <a href="javascript:void(0)" class="hide-second-level toggle" style="display: none;">
    <i class="fa fa-minus"></i>
  </a>
</li>
<li class="category expandable">
  <span>Test 2 with much longer text ... and a third row</span>
  <a href="javascript:void(0)" class="show-second-level toggle">
    <i class="fa fa-plus"></i>
  </a>
  <a href="javascript:void(0)" class="hide-second-level toggle" style="display: none;">
    <i class="fa fa-minus"></i>
  </a>
</li>

Answer 2

如果你想将“诊所”和图标放在一起，那么它们就应该被包裹在一个范围内。最好是white-space: nowrap。 ; - ）

Answer 3

使用CSS将应该显示在块中同一行的整个事物包裹起来：white-space: nowrap。它将阻止浏览器包含在该块内。如果需要，它将在该块之前或之后换行。

div {
  width: 30px;
  height: 100px;
  background: #DDEEEE;
  border: blue dotted 1px;
}

span {
  white-space: nowrap;
}

<div>
  <span>This is a long text <i>icon</i></span> and this is outside
</div>