2016-12-15 9 views
-1

Я создал jsfiddle https://jsfiddle.net/kmdkLjze/1/ для следующих HTML код. Я хочу следующий текст, который присутствует в fiddle, а также присутствовать на желтом фоне.Как установить фоновый цвет вокруг текста?

enter image description here

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> 

Я могу поставить линию в «У вас есть 150 неиспользованных ежемесячных сгибать кредитов Вы можете выделить эти гибкие кредиты на ваш.» желтый фон с помощью кода CSS, присутствующего в fiddle, но, к сожалению, я не смог поставить остальные 3 точки на желтом фоне.

+0

Не можете ли вы просто поместить все нужные компоненты в один div и стиль? –

+0

@ DanielLisik Можем ли мы достичь результата, не помещая нужные компоненты в один div? –

ответ

0

Использование ниже 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; 
} 

Рабочая скрипку: https://jsfiddle.net/kmdkLjze/3/

EDIT

Ниже 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; 
} 

Обновит ED FIDDLEhttps://jsfiddle.net/kmdkLjze/4/

+0

Не весь контент. Только содержимое, как показано на изображении. Проверьте изображение в вопросе –

+0

проверьте обновленный ответ @shortcut –

+0

Пожалуйста, отметьте это как ответ, если он сработает для вас, чтобы он мог помочь любому другому парню, ищущему зол для такого сценария, благодаря @shortcut –

Смежные вопросы