html - 更改元素内 的背景

Question

我有两个 <span>在 <div> 的列表中.每个 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 表格来拯救!

.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;}

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