Question

有人可以告诉我如何使单选按钮看起来更接近吗？（他们目前彼此相距甚远）

我尝试使用'padding-left'，如下所示，但这并没有解决我的问题。谁能告诉我究竟出了什么问题？

我试过了：

.gform_wrapper .left_label ul.gfield_checkbox,
.gform_wrapper .right_label ul.gfield_checkbox,
.gform_wrapper .left_label ul.gfield_radio,
.gform_wrapper .right_label ul.gfield_radio {
  margin-left: 32%;
  overflow: hidden;
  padding-left: 20px;
}

Answer 1

#main-content .gform_wrapper label {
  width: 200px;
}

此规则适用于您的单选按钮标签，这就是您在项目之间有如此大空间的原因。

Answer 2

尝试此操作可能会减少单选按钮之间的空间。

.ginput_container ul li label {width：120px;}

Answer 3

您需要更改“男性”，“女性”等标签的宽度。我会为这些标签添加一个类，这样他们就不会从另一个规则中获得200px的宽度。从理论上讲，

<li class="gchoice_6_0">
   <input name="input_6" type="radio" value="Male" id="choice_6_0" tabindex="4" onclick="gf_apply_rules(3,[0]);">
   <label for="choice_6_0" class="radioLabel">Male</label>
</li>

然后将以下规则添加到您的css

#main-content .gform_wrapper label.radioLabel {
    width:30px; //Adjust this width for the result you want. 
}

Answer 4

假设您将有2行，每行有2个单选按钮，就像您提供的链接一样。

第一行

<div class="radioDiv">
   <input type="radio" name="group1" class="leftRadio" value="male"/>
   <input type="radio" name="group1" class="rightRadio" value="female"/>
</div>

第二行

<div class="radioDiv">
   <input type="radio" name="group2" class="leftRadio" value="single"/>
   <input type="radio" name="group2" class="rightRadio" value="married"/>
</div>

<强> CSS

.radioDiv
{
   width:200px;
}
.leftRadio
{
   float:left;
}
.rightRadio
{
   float:right;
}

Answer 5

使用此：

<label for="choice_6_0" style="width: 50px;">Male</label>

并为男性等所有标签添加宽度

Answer 6

您的各种CSS文件中有几个相互矛盾的规则例如，this说

.wpcf7-form label, #main-content .gform_wrapper label {
    float: left;
    width: 70px;
}

虽然this说

#main-content .gform_wrapper label { width: 200px; }

后者碰巧覆盖了前者，但仅仅因为你以后包含了第二个文件。

因此，您可以删除第二行中的行，或更改CSS文件的包含顺序。

如何更改单选按钮之间的填充/边距？

6 个答案: