Выравнивание переключателей

Question

Я хотел бы, чтобы радиокнопки отображались слева от ярлыков, а не выше. Помощь очень ценится. Благодарю.

Использование плагина WordPress cForm.

http://www.alagroup.com.au/whiteowlmumsanddads/

<div class="wdform_row" style="opacity: 1;" wdid="26"> 
      <div id="wdform_field26" type="type_radio" class="wdform_field" style="display: table-cell;"> 
       <div align="left" id="26_label_sectionform_id_temp" class="" style="display: block; width: 480px;"> 
        <span id="26_element_labelform_id_temp" class="label" style="vertical-align: top;"> 
          Is there something in particular you are interested in? 
        </span> 
        <span id="26_required_elementform_id_temp" class="required" style="vertical-align: middle;"> 
        </span> 
       </div> 
       <div align="left" id="26_element_sectionform_id_temp" class="" style="display: table-cell;"> 
        <input type="hidden" value="type_radio" name="26_typeform_id_temp" id="26_typeform_id_temp"> 
        <input type="hidden" value="no" name="26_requiredform_id_temp" id="26_requiredform_id_temp"> 
        <input type="hidden" value="no" name="26_randomizeform_id_temp" id="26_randomizeform_id_temp"> 
        <input type="hidden" value="no" name="26_allow_otherform_id_temp" id="26_allow_otherform_id_temp"> 
        <input type="hidden" value="0" name="26_allow_other_numform_id_temp" id="26_allow_other_numform_id_temp"> 
        <input type="hidden" value="6" name="26_rowcol_numform_id_temp" id="26_rowcol_numform_id_temp"> 
        <div style="display: table;"> 
          <div id="26_table_little" style="display: table-row-group;" for_hor="26_hor"> 
           <div id="26_element_tr0" style="display: block;"> 
            <div valign="top" id="26_td_little0" idi="0" style="display: table-cell;"> 
             <input type="radio" value="Life Insurance" id="26_elementform_id_temp0" name="26_elementform_id_temp" onclick="set_default(&quot;26&quot;,&quot;0&quot;,&quot;form_id_temp&quot;)" > 
             <label id="26_label_element0" class="ch_rad_label" for="26_elementform_id_temp0"> 
               Life Insurance 
             </label> 
            </div> 
           </div> 
           <div id="26_element_tr1" style="display: block;"> 
            <div valign="top" id="26_td_little1" idi="1" style="display: table-cell;"> 
             <input type="radio" value="Income Protection" id="26_elementform_id_temp1" name="26_elementform_id_temp" onclick="set_default(&quot;26&quot;,&quot;1&quot;,&quot;form_id_temp&quot;)" > 
             <label id="26_label_element1" class="ch_rad_label" for="26_elementform_id_temp1"> 
               Income Protection 
             </label> 
            </div> 
           </div> 
           <div id="26_element_tr2" style="display: table-row;"> 
            <div valign="top" id="26_td_little2" idi="2" style="display: table-cell;"> 
             <input type="radio" value="Trauma Insurance" id="26_elementform_id_temp2" name="26_elementform_id_temp" onclick="set_default(&quot;26&quot;,&quot;2&quot;,&quot;form_id_temp&quot;)" > 
             <label id="26_label_element2" class="ch_rad_label" for="26_elementform_id_temp2"> 
               Trauma Insurance 
             </label> 
            </div> 
           </div> 
           <div id="26_element_tr3" style="display: table-row;"> 
            <div valign="top" id="26_td_little3" idi="3" style="display: table-cell;"> 
             <input type="radio" value="Business Insurance" id="26_elementform_id_temp3" name="26_elementform_id_temp" onclick="set_default(&quot;26&quot;,&quot;3&quot;,&quot;form_id_temp&quot;)" > 
             <label id="26_label_element3" class="ch_rad_label" for="26_elementform_id_temp3"> 
               Business Insurance 
             </label> 
            </div> 
           </div> 
           <div id="26_element_tr4" style="display: table-row;"> 
            <div valign="top" id="26_td_little4" idi="4" style="display: table-cell;"> 
             <input type="radio" value="Other" id="26_elementform_id_temp4" name="26_elementform_id_temp" onclick="set_default(&quot;26&quot;,&quot;4&quot;,&quot;form_id_temp&quot;)" > 
             <label id="26_label_element4" class="ch_rad_label" for="26_elementform_id_temp4"> 
               Other 
             </label> 
            </div> 
           </div> 
           <div id="26_element_tr5" style="display: table-row;"> 
           </div> 
          </div> 
        </div> 
       </div> 
      </div> 

Answer 1

Вы могли бы просто использовать некоторые пользовательские CSS для выравнивания радиокнопки с этикеткой.

Я никогда не использовал Wordpress самостоятельно, но похоже, что он поддерживается.

Могу ли я использовать пользовательский CSS для внесения незначительных визуальных изменений в существующую тему ? Reference

Копирование разметки в JSFiddle дает мне результат ваш ищет: jsfiddle. Вы не включили ни одного стиля, применяемого к странице. Использование Chrome Dev инструментов (F12) на page вы связаны, я впервые попробовал применять следующие стили:

div#wdform_field26 .input[type="radio"] { 
    float: left; 
} 

Однако, учитывая существующий стиль на странице, это не выглядело совсем верно. Я бы обескуражил использование float, поскольку это удаляет элемент из обычной иерархии, делая более сложным последующий стиль.

Затем я применил следующие стили и добились результата я думаю, что ваш ищет:

div#wdform_field26 .input[type="radio"] { 
    height: auto !important; 
    margin-top: 0; 
    margin-right: 1em; 
} 

div#wdform_field26 .label { 
    display: inline-block; 
    vertical-align: middle; 
} 

Я всегда рекомендую использовать block или inline-block режим отображения над floats, как это делает последующий стиль более предсказуемым, и, конечно, оба имеют свое место.

Хотя я просто применял стили к самим элементам, я попытался предоставить примерный код точными селекторами, вам нужно будет дважды проверить, что это не влияет на элементы неправильно.

Answer 2

использование float:left

Пожалуйста, используйте поплавок: левый Css свойство кнопки ввода радио

<input type="radio" value="Life Insurance" 
name="26_element12contact" style="float:left"/>