更改元素内<span>的背景

Question

我在<span>列表中有两个<div>。每个div都有不同的文本量，因此每个文本的高度都不同。

以下是HTML： -

<li class="correct">
    <div class="conclusion-q-area">

        <span class="q-c-area">Diam egestas dictumst maecenas adipiscing egestas tempus nullam ullamcorper elementum vel suspendisse hac accumsan dapibus sociosqu consectetur viverra ante enim ad id sodales parturient..</span>
        <span class="q-res-area"><i class="fa fa-times red"></i></span>
    </div>
</li>

<li class="correct">
    <div class="conclusion-q-area">

        <span class="q-c-area">Diam egestas dictumst maecenas adipiscing egestas tempus nullam ullamcorper elementum..</span>
        <span class="q-res-area"><i class="fa fa-times red"></i></span>
    </div>
</li>

问题是我很难用span更改q-res-area的背景颜色。它似乎从某个地方预先选取高度，然后用所有行限制它。这是显示它的图像。注意最后一行： -

CSS是： -

.correct {
  position:relative;
  color: #fff!important;
  background-color: #0065bd;
  font-weight: bold;

}

.conclusion-q-area span {
  padding: 15px;
  display: inline-block;
}

.q-c-area {width: 90%;}
.q-res-area {width: 10%; background-color: #F9F9F9; font-size: 20px;}

Answer 1

CSS表格救援！

＆＃13;

＆＃13;

.correct div {
  display:table-row;
}
.correct div span {
  display:table-cell;
}

.red {
  color:red
}

.correct {
  display:table;
  color: #fff!important;
  background-color: #0065bd;
  font-weight: bold;

}

.conclusion-q-area span {
  padding: 15px;
}

.q-c-area {width: 90%;}
.q-res-area {width: 10%; background-color: #F9F9F9; font-size: 20px;}

＆＃13;

<ul>
<li class="correct">
    <div class="conclusion-q-area">

        <span class="q-c-area">Diam egestas dictumst maecenas adipiscing egestas tempus nullam ullamcorper elementum vel suspendisse hac accumsan dapibus sociosqu consectetur viverra ante enim ad id sodales parturient..</span>
        <span class="q-res-area"><i class="fa fa-times red">X</i></span>
    </div>
</li>

<li class="correct">
    <div class="conclusion-q-area">

        <span class="q-c-area">Diam egestas dictumst maecenas adipiscing egestas tempus nullam ullamcorper elementum..</span>
        <span class="q-res-area"><i class="fa fa-times red">X</i></span>
    </div>
</li>
</ul>

＆＃13;

＆＃13;

＆＃13;