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。您尚未包含应用于页面的任何样式。在您关联的page上使用Chrome开发工具（F12），我首先尝试应用以下样式：

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

然而，考虑到页面上现有的样式，这看起来并不合适。我不鼓励使用float，因为这会从常规层次结构中删除元素，从而使后续样式变得更加棘手。

Using float:left

然后我应用了以下样式并实现了我认为您正在寻找的结果：

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;
}

Using display:inline-block

我总是建议在block上使用inline-block或floats显示模式，因为它可以使后续样式更具可预测性，当然两者都有它们的位置。

虽然我只是将样式应用于元素本身，但我试图提供具有精确选择器的示例代码，您需要仔细检查这不会错误地影响元素。

Answer 2

使用float:left

请使用float：left Css属性到Input单选按钮

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

对齐单选按钮

2 个答案: