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

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

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

<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 2

假设您将有 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 3

用这个：

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

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

Answer 4

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

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

虽然这说

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

后者恰好覆盖了前者，但这只是因为您稍后包含了第二个文件。

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

Answer 5

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

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

Answer 6

试试这个，这可能会减少单选按钮之间的空间。

.ginput_container ul li 标签{width:120px;}