Question

如果标题不清楚，请原谅。我真的不知道该如何描述这个问题，这也使我更难通过Google搜索解决方案。

我已经将我的代码插入了一个小提琴，所以我可以更好地解释它： 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;
}

有人有主意吗？

预先感谢

Answer 1

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>

Answer 2

您应该在position: absolute类上使用.collapse-button。在您的position: relative类中添加.panel-title。如果要调整 X 的位置，可以在{中更改top，right，left和bottom属性的值{1}}类

.collapse-button

.panel-title {
  width: 200px;
}

.panel-title h3 {
    margin: 8px 0 -1em 0;
    display: block;
    width: calc(100% - 30px);
    position: relative;
}

.panel-title span.collapse-button {
    padding: 0px;
    height: 25px;
    margin: 0px;
    display: block;
    position: absolute;
    top: 10px;
    right: 0;
}

.collapse-button i {
    width: 25px;
    height: 15px;
}

.pull-right {
    float: right !important;
}

Answer 3

Flexbox可以做到

* {
  margin: 0;
  padding: 0;
}

.panel-title {
  width: 200px;
  display: flex;
  margin: 1em;
  border: 1px solid grey;
}

.panel-title h3 {
  display: block;
  flex: 1;
}

.panel-title span.collapse-button {
  padding: 0px;
  height: 25px;
  margin: 0px;
  display: block;
}

.collapse-button i {
  width: 25px;
  height: 15px;
}

<div class="panel-title">
  <h3>test sdfjsdf sdjfk sjkdf sdjk fjksd fjskdf jksdfj ksdfjk sfd jksd</h3>
  <span class="collapse-button">
    <i aria-hidden="true">X</i>
  </span>
</div>

<div class="panel-title">
  <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem alias est ex, reiciendis expedita natus distinctio quos ipsam cumque soluta, iusto incidunt molestias mollitia, ullam labore aliquid iure inventore voluptate!</h3>
  <span class="collapse-button">
    <i aria-hidden="true">X</i>
  </span>
</div>

Answer 4

输入：

.panel-title {位置：相对；宽度：200像素； }

和

.collapse-button i {位置：绝对；顶部：5px；右：0px； }

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

4 个答案: