时间戳

首页 > 解决方案 > CSS：防止使用多个文本行降低项目

css - CSS：防止使用多个文本行降低项目

问题描述

首先，如果标题不清楚，请原谅。我真的不知道如何描述这个问题，这也让我更难用谷歌搜索解决方案。

我已将我的代码插入小提琴中，以便更好地解释它： https ://jsfiddle.net/Lzbavyu9/2/

我希望 X 始终与文本的第一行处于相同的高度。我已经尝试过垂直对齐，但这不起作用。它总是随着文本的最后一行向下移动。

代码如下

<div class="panel-title">
  <h3>test sdfjsdf sdjfk sjkdf sdjk fjksd fjskdf jksdfj ksdfjk sfd jksd</h3>
  <span class="collapse-button">
    <i class="pull-right" aria-hidden="true">X</i>
  </span>
</div>

CSS

.panel-title {
  width: 200px;
}

.panel-title h3 {
    margin: 8px 0 -1em 0;
    display: block;
    width: calc(100% - 30px);
}

.panel-title span.collapse-button {
    padding: 0px;
    height: 25px;
    margin: 0px;
    display: block;
}

.collapse-button i {
    width: 25px;
    height: 15px;
}

.pull-right {
    float: right !important;
}

有人有想法吗？

提前致谢

标签： css

解决方案

div h3{
  display: inline-block;
  max-width: 10em;
  vertical-align: top;
  margin: 0;
}
<div>
  <h3>test sdfjsdf sdjfk sjkdf sdjk fjksd fjskdf jksdfj ksdfjk sfd jksd</h3>
  <i>X</i>
</div>

推荐阅读