Question

我有3个看起来像按钮的单选按钮。

<div id='vaccine-selector-container' class="switch-field">
        <span class='custom-control custom-radio custom-control-inline'>
            <input type='radio' id='rb-dtp' name='vaccine-selector' class='custom-control-input' value='DTP' autocomplete='off' checked>
            <label class='custom-control-label' for='rb-dtp'>DTP</label>
            <label class='custom-control-label-help' for='rb-dtp'>Vaccine against diphtheria, tetanus, pertussis</label>
        </span>
        <span class='custom-control custom-radio custom-control-inline'>
            <input type='radio' id='rb-mmr' name='vaccine-selector' class='custom-control-input' value='MMR' autocomplete='off'>
            <label class='custom-control-label' for='rb-mmr'>MMR</label>
            <label class='custom-control-label-help' for='rb-mmr'>Vaccine against measles, mumps and rubella</label>
        </span>     
        <span class='custom-control custom-radio custom-control-inline'>
            <input type='radio' id='rb-pol' name='vaccine-selector' class='custom-control-input' value='POL' autocomplete='off'>
            <label class='custom-control-label' for='rb-pol'>POL</label>
            <label class='custom-control-labelHelp' for='rb-pol'>Vaccine against poliomyelitis</label>
        </span>
    </div>

但是我想要的是：“标题”标签和“字幕”标签。

Here

我该怎么办？

Answer 1

不确定是不是您要实现的目标，希望对您有所帮助

<div class="radio">
  <label><input type="radio" name="optradio">
    <h3>Title</h3>
    <p>Sub Title</p>
  </label>
</div>

Answer 2

孩子是一种方式（demo）：

car_company( 1, 1234, person('Jujiro', 'Matsuda'), 'Mazda' ).

production( 1, cars, new, 'Mazda-3', info( gray,  person1 ), 26/08/2016 ).
production( 1, cars, old, 'Cosmo',   info( black, person2 ), 26/08/1927 ).
production( 1, cars, old, 'RX-7',    info( black, person2 ), 26/08/1979 ).

% query:
q :- 
    findall(
        new_car( ID, Model, Color ),
       (  
           car_company( ID, _ , person('Jujiro', 'Matsuda'), 'Mazda' ),
           production( ID, cars, new, Model, info( Color, _ ), _ )
       ),
       Result1
    ),
    writeq( Result1 ),
    findall(
        old_car( ID, Model, Color ),
        (   
            car_company( ID, Phone, person('Jujiro', 'Matsuda'), 'Mazda' ),
            production( ID, cars, old, Model, info( Color, _ ), _ )
        ),
        Result2
    ),                   
    writeq( Result2 ).

Answer 3

您需要将两个标签都包装在一个标签下，并为此父标签赋予'for'属性，并且可以将这些单独的内部标签更改为任何其他标签（例如：p标签）。

<div id='vaccine-selector-container' class="switch-field">
        <span class='custom-control custom-radio custom-control-inline'>
            <input type='radio' id='rb-dtp' name='vaccine-selector' class='custom-control-input' value='DTP' autocomplete='off' checked>
            <label for='rb-dtp'>
                <p class='custom-control-label'>DTP</p>
                <p class='custom-control-label-help'>Vaccine against diphtheria, tetanus, pertussis</p>
            </label>

        </span>
        <span class='custom-control custom-radio custom-control-inline'>
            <input type='radio' id='rb-mmr' name='vaccine-selector' class='custom-control-input' value='MMR' autocomplete='off'>
            <label for='rb-mmr'>
                <p class='custom-control-label'>MMR</p>
                <p class='custom-control-label-help'>Vaccine against measles, mumps and rubella</p>
            </label>

        </span>     
        <span class='custom-control custom-radio custom-control-inline'>
            <input type='radio' id='rb-pol' name='vaccine-selector' class='custom-control-input' value='POL' autocomplete='off'>
            <label for='rb-pol'>
                <p class='custom-control-label'>POL</p>
                <p class='custom-control-labelHelp' for='rb-pol'>Vaccine against poliomyelitis</p>
            </label>
        </span>
    </div>

Answer 4

将单选按钮放入标签

   <span class='custom-control custom-radio custom-control-inline'>
                    <label class='custom-control-label' for='rb-dtp'><input type='radio' id='rb-dtp' name='vaccine-selector' class='custom-control-input' value='DTP' autocomplete='off' checked>   DTP                 <label class='custom-control-label-help' for='rb-dtp'>              Vaccine against diphtheria, tetanus, pertussis</label>
</label>


            </span>

和

.switch-field label {
width:40%;
}

具有标题和字幕标签的单选按钮

4 个答案: