Question

我想知道如何将星号符号与文本对齐，并降低图像中显示的是和否元素。

请参阅下面的小提琴：https://jsfiddle.net/07bd0hda/和摘录：

＆＃13;

<div class="dependents-covered-elsewhere">
  <div class="dependents-covered-elsewhere-asterisk">*</div>
  <label data-bind="text: i18n('dependents.coveredElsewhere')">Is the dependent covered elsewhere?</label>
  <input type="radio" name="coveredElsewhere" value="1" data-bind="checked: coveredElsewhereForBinding, enable: !(isTab() &amp;&amp; emprel_id &amp;&amp; vm.home.action() == 'life-events')" disabled="">
  <div data-bind="visible: field.isModified() &amp;&amp; !field.isValid(), attr: {title: field.error}" class="info" style="display: none;">
  </div>

  <label>
    <!-- ko i18n:'yes' -->Yes
    <!-- /ko -->
  </label>

  <input type="radio" name="coveredElsewhere" value="0" data-bind="checked: coveredElsewhereForBinding, enable: !(isTab() &amp;&amp; emprel_id &amp;&amp; vm.home.action() == 'life-events')" disabled="">
  <div data-bind="visible: field.isModified() &amp;&amp; !field.isValid(), attr: {title: field.error}" class="info" style="display: none;">
  </div>


  <label>
    <!-- ko i18n:'no' -->No
    <!-- /ko -->
  </label>
</div>

＆＃13;

我使用过的CSS：

.dependents-covered-elsewhere {
    max-width: 340px;
    margin-left: 5px;
}

Answer 1

更新＆amp;通过在选项上添加<div>并在星号上添加<span>来重新排序HTML标记。

请查看下面的代码段或查看更新的fiddle：

<div class="dependents-covered-elsewhere">
     <label data-bind="text: i18n('dependents.coveredElsewhere')">Is the dependent covered elsewhere?</label>
     <span class="dependents-covered-elsewhere-asterisk">*</span>
     <div class="option-holder">
       <input type="radio" name="coveredElsewhere" value="1" data-bind="checked: coveredElsewhereForBinding, enable: !(isTab() &amp;&amp; emprel_id &amp;&amp; vm.home.action() == 'life-events')" disabled=""><div data-bind="visible: field.isModified() &amp;&amp; !field.isValid(), attr: {title: field.error}" class="info" style="display: none;">
</div>

<label><!-- ko i18n:'yes' -->Yes<!-- /ko --></label>
        
        <input type="radio" name="coveredElsewhere" value="0" data-bind="checked: coveredElsewhereForBinding, enable: !(isTab() &amp;&amp; emprel_id &amp;&amp; vm.home.action() == 'life-events')" disabled=""><div data-bind="visible: field.isModified() &amp;&amp; !field.isValid(), attr: {title: field.error}" class="info" style="display: none;">
</div>
 
        
        <label><!-- ko i18n:'no' -->No<!-- /ko --></label>
        </div>
    </div>

希望这有帮助！

Answer 2

我为你的*使用了一个span，因为span是原生的显示内联

然后我添加了一个带有first-of-type的伪类的css规则，仅适用于第一个标签并将其设置为显示块

＆＃13;

.dependents-covered-elsewhere label:first-of-type {
  display:block;
  }




.dependents-covered-elsewhere-asterisk{color:red;}

＆＃13;

<div class="dependents-covered-elsewhere">
   
     <label data-bind="text: i18n('dependents.coveredElsewhere')">Is the dependent covered elsewhere? <span class="dependents-covered-elsewhere-asterisk">*</span></label>
       <input type="radio" name="coveredElsewhere" value="1" data-bind="checked: coveredElsewhereForBinding, enable: !(isTab() &amp;&amp; emprel_id &amp;&amp; vm.home.action() == 'life-events')" disabled=""><div data-bind="visible: field.isModified() &amp;&amp; !field.isValid(), attr: {title: field.error}" class="info" style="display: none;">
</div>

<label><!-- ko i18n:'yes' -->Yes<!-- /ko --></label>
        
        <input type="radio" name="coveredElsewhere" value="0" data-bind="checked: coveredElsewhereForBinding, enable: !(isTab() &amp;&amp; emprel_id &amp;&amp; vm.home.action() == 'life-events')" disabled=""><div data-bind="visible: field.isModified() &amp;&amp; !field.isValid(), attr: {title: field.error}" class="info" style="display: none;">
</div>
 
        
        <label><!-- ko i18n:'no' -->No<!-- /ko --></label>
    </div>

＆＃13;

Answer 3

您所要做的就是使持有星号的div成为span元素：

＆＃13;

Case "Upcoming"
    .Range("A" & j & ":K" & j).Copy Destination:=Sheets("Sheet1").Cells(Sheets("Sheet1").Cells(Sheets("Sheet1").Rows.Count, "A").End(xlUp).Row + 1, "A")

Case "Complete"
    .Range("A" & j & ":K" & j).Copy Destination:=Sheets("Sheet1").Cells(Sheets("Sheet1").Cells(Sheets("Sheet1").Rows.Count, "M").End(xlUp).Row + 1, "M")

Case "In Progress"
    .Range("A" & j & ":K" & j).Copy Destination:=Sheets("Sheet1").Cells(Sheets("Sheet1").Cells(Sheets("Sheet1").Rows.Count, "U").End(xlUp).Row + 1, "U")

＆＃13;

Answer 4

这样就够了吗？

CSS： .dependents-covered-elsewhere-asterisk { float: left; }

Answer 5

执行此操作的众多方法之一 - 不更改标记：

将if(!function_exists('psychic2016_add_customCSS')) { function psychic2016_add_customCSS() { echo '<style id="psychic2016-custom-css">'.esc_textarea(get_theme_mod('psychic2016_customCSS')).'</style>'; } } add_action('wp_head', 'psychic2016_add_customCSS', 1000);绝对置于标签右侧
按asterick

见下面的演示：

display: block

.dependents-covered-elsewhere {
  position: relative;
  display: inline-block;
}
.dependents-covered-elsewhere-asterisk + label {
  display: block;
}
.dependents-covered-elsewhere-asterisk {
  position: absolute;
  right: 0;
  transform: translateX(100%);
}

调整html和css中的元素

5 个答案: