Html 如何设置文本周围的背景色?
我已经为以下HTML代码创建了一个JSFIDLE。我想下面的文本,这是目前在以及目前在黄色背景 HTML代码:Html 如何设置文本周围的背景色?,html,css,media-queries,Html,Css,Media Queries,我已经为以下HTML代码创建了一个JSFIDLE。我想下面的文本,这是目前在以及目前在黄色背景 HTML代码: <div class="section"> <div class="row inter"> <span data-bind="html: getLabel(unusedCreditsLabel)">You have <b>150</b> unused monthly fl
<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() && !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() && !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() && !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() && !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() && !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>
您每月有150个未使用的弹性信用。您可以将这些弹性学分分配给您的
- 集团RRSP
- 健康支出账户(HSA)不适用于定期员工
- 运动津贴
未使用的学分
150
组RRSP
:
运动津贴
:
放弃信贷
:
健康支出账户(HSA):
现金:
您有未分配的灵活学分:
0
我可以将行“您每月有150个未使用的弹性积分。您可以通过中存在的CSS代码将这些弹性积分分配给您的”放在黄色背景中,但不幸的是,我无法将其他3点放在黄色背景中。使用下面的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;
}
工作小提琴:
编辑
下面是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难道你不能将所有想要的组件放在一个分区中,并对其中一个分区进行样式化吗?@Daniellisk我们能在不将想要的组件放在一个分区中的情况下实现结果吗?不是全部内容。仅显示图像中显示的内容。检查问题中的图片如果对你有效,请将此标记为答案,这样可以帮助任何其他寻找sol的人解决此类问题,谢谢@shortcut