如何在文本周围设置背景颜色？

Question

我为以下 HTML 代码 创建了一个 jsfiddle https://jsfiddle.net/kmdkLjze/1/。我希望fiddle 中出现的以下文本也出现在黄色背景中。

HTML 代码：

<div class="section">
            <div class="row inter">
               <span data-bind="html: getLabel(unusedCreditsLabel)">You have <b>150</b> unused monthly flex credits. You may allocate these flex credits to your</span>
            </div>


            <div class="row inter allocation-container">
                <!-- ko if: unused_creditsoptions_label[$root.locale.selected_locale()].length > 0  -->
                <div class="list" data-bind="html:unused_creditsoptions_label[$root.locale.selected_locale()]"><ul class="small"><li>Group RRSP</li><li>Health Spending Account (HSA)Not Available for Term Employees</li><li>Sports Allowance</li></ul></div>
                <!-- /ko -->
                <div class="allocation">
                <div class="row">
                    <div class="left label"><span class="strong"><!-- ko i18n: 'coverage.unused.credits' -->Unused credits<!-- /ko --></span></div>
                    <div class="right strong" data-bind="text: unUsedCredits">150.000</div>
                </div>
                <div data-bind="foreach: rrsp_details">
                    <div class="row">
                        <div class="left label"><span data-bind="text: $parent.getProgramTitle(title)">Group RRSP   </span>
                        <!-- ko if: rrsp_file.params[0][$root.locale.selected_locale()].length > 0  --><!-- /ko -->
                        :</div>
                        <div class="right"><input type="text" class="short" data-bind="numericText: flexc_rrsp, precision: $parent.round, value:flexc_rrsp,  valueUpdate: 'afterkeydown', placeHolder: {value: 0, applyStyle: false}, attr: {tabindex: $index()+1}" tabindex="1"><div data-bind="visible: field.isModified() &amp;&amp; !field.isValid(), attr: {title: field.error}" class="info" style="display: none;">
</div>
</div>
                    </div>

                    <div class="row">
                        <div class="left label"><span data-bind="text: $parent.getProgramTitle(title)">Sports Allowance   </span>
                        <!-- ko if: rrsp_file.params[0][$root.locale.selected_locale()].length > 0  --><!-- /ko -->
                        :</div>
                        <div class="right"><input type="text" class="short" data-bind="numericText: flexc_rrsp, precision: $parent.round, value:flexc_rrsp,  valueUpdate: 'afterkeydown', placeHolder: {value: 0, applyStyle: false}, attr: {tabindex: $index()+1}" tabindex="2"><div data-bind="visible: field.isModified() &amp;&amp; !field.isValid(), attr: {title: field.error}" class="info" style="display: none;">
</div>
</div>
                    </div>

                    <div class="row">
                        <div class="left label"><span data-bind="text: $parent.getProgramTitle(title)">Waive Credits   </span>
                        <!-- ko if: rrsp_file.params[0][$root.locale.selected_locale()].length > 0  --><!-- /ko -->
                        :</div>
                        <div class="right"><input type="text" class="short" data-bind="numericText: flexc_rrsp, precision: $parent.round, value:flexc_rrsp,  valueUpdate: 'afterkeydown', placeHolder: {value: 0, applyStyle: false}, attr: {tabindex: $index()+1}" tabindex="3"><div data-bind="visible: field.isModified() &amp;&amp; !field.isValid(), attr: {title: field.error}" class="info" style="display: none;">
</div>
</div>
                    </div>
                </div>
                    <div class="row" data-bind="with:hcsa_details">
                        <div class="left label"><span data-bind="text: $parent.getProgramTitle(title)">Health Spending Account (HSA)    </span>:</div>
                        <div class="right"><input type="text" class="short" data-bind="numericText: flexc_hcsa, precision: $parent.round, value: flexc_hcsa, valueUpdate: 'afterkeydown', placeHolder: {value: 0, applyStyle: false}, attr: {tabindex: $index()+1}" tabindex="4"><div data-bind="visible: field.isModified() &amp;&amp; !field.isValid(), attr: {title: field.error}" class="info" style="display: none;">
</div>
</div>
                    </div>
                    <div class="row" data-bind="with:cash_details">
                        <div class="left label"><span data-bind="text: $parent.getProgramTitle(title)">Cash    </span>:</div>
                        <div class="right"><input type="text" class="short" data-bind="numericText: cash_amt, precision: $parent.round, value: cash_amt,  valueUpdate: 'afterkeydown', placeHolder: {value: 0, applyStyle: false}, attr: {tabindex: $index()+1}" tabindex="4"><div data-bind="visible: field.isModified() &amp;&amp; !field.isValid(), attr: {title: field.error}" class="info" style="display: none;">
</div>
</div>
                    </div>
                </div>
                <div class="allocation">
                    <div class="line"></div>
                    <div class="row">
                        <div class="left" data-bind="css: {'total': unallocatedCredits() != 0}">
                            <!-- ko if: unallocatedCredits() >= 0 --> <span data-bind="text: i18n('unusedCredits.unallocatedCreditsYouHave'), css: {'total': unallocatedCredits() > 0}" class="">You have unallocated flexible credits : </span> <!-- /ko -->
                            <!-- ko if: unallocatedCredits() < 0 --><!-- /ko -->
                        </div>
                        <div class="right" data-bind="text: Math.abs(unallocatedCredits()).toFixed(round),
                            css: {'total': unallocatedCredits() != 0}">0.000</div>
                    </div>
                </div>
            </div>
        </div>

我可以通过fiddle 中的 CSS 代码将“您有 150 个未使用的每月弹性积分。您可以将这些弹性积分分配给您的”行放在黄色背景中，但是不幸的是，我无法将其他 3 个点放在黄色背景中。

Answer 1

使用下面的 css 获得所需的输出：

.allocation-container .list
{
    background: #EABB27;
    padding: 20px 20px 20px 1px;
    margin-left: 0;
    margin-right: 20px;
    line-height: 1.4;
    position: relative;
    font-family: arial, helvetica, sans-serif;
    color: white;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 20px;

}
.row{
  background: #EABB27;
}

工作 FIDDLE：https://jsfiddle.net/kmdkLjze/3/

编辑

下面的css会做：

.allocation-container .list
{
    background: #EABB27;
    padding: 20px 20px 20px 0;
    margin-left: 0;
    line-height: 1.4;
    position: relative;
    font-family: arial, helvetica, sans-serif;
    color: white;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 20px;

}
.section .inter:nth-child(1)
{
  background: #EABB27;
}

更新的 FIDDLE https://jsfiddle.net/kmdkLjze/4/