0

ラジオボタン同士を近づける方法を教えてください。(現在、両者は互いに離れて表示されます)

このリンクを確認してください。

以下のように「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;
}
4

6 に答える 6

0

あなたが提供したリンクのように、各行に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;
}
于 2013-01-24T07:48:21.397 に答える
0 
#main-content .gform_wrapper label {
  width: 200px;
}

このルールはラジオ ボタンのラベルに適用されます。そのため、アイテム間に大きなスペースがあります。

于 2013-01-24T07:43:23.143 に答える
0

これを試してみてください。これにより、ラジオ ボタン間のスペースが減る場合があります。

.ginput_container UL リ ラベル{幅:120px;}

于 2013-01-24T07:43:53.510 に答える
0

これを使って：

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

男性などのすべてのラベルの幅を追加します

于 2013-01-24T07:50:44.543 に答える
0

「男性」、「女性」などのラベルの幅を変更する必要があります。これらのラベルのクラスを追加して、他のルールからの 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. 
}
于 2013-01-24T07:46:12.117 に答える
0

さまざまな CSS ファイルに矛盾するルールがいくつかあります。
たとえば、これは言う

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

これが言いながら

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

後者はたまたま前者をオーバーライドしますが、これは後で 2 番目のファイルを含めるためです。

したがって、2 番目の行を削除するか、CSS ファイルが含まれる順序を変更することができます。

于 2013-01-24T07:51:43.983 に答える