0

設定した最大幅と黄色の背景を持つ div があります。その div には、2 セットのラジオ ボタン (各セットに 5 つのボタン) を配置し、それぞれに関連付けられたラベルを付けました。

ラジオボタンの間、または関連するテキストとラジオボタンの間で、セットを 2 行で分割したくありません。そのため、各セットの範囲で 'white-space:nowrap' を使用します。一方、2 つの長いセットが次々とある場合は、2 番目のセットが自動的に次の行に移動するようにします。

私が見るものは興味深いものです。画面の中央に黄色の背景を持つ div がありますが、両方のラジオボタン セットが同じ行にあります。右端のラジオボタン セットは黄色の領域から始まり、それを超えて背景に広がっています。デモンストレーション用に jsfiddle を作成しました。https://jsfiddle.net/03jLe0x1/ に あります。 コードも次のとおりです。

.radiospan {
    font-family: Verdana;
}

.checkspan {
    white-space: nowrap;
    font-family: Verdana;
}

#newDivCenter {
    background-color: yellow;
    text-align: center;
    min-width:788px;
    max-width:840px;
}


    <div id="newDivCenter"><span class="checkspan"><input type="checkbox" id="chk0" name="mychecks0" value="1">
Audible?</span><span>&nbsp;&nbsp; </span><span class="checkspan"><input type="checkbox" id="chk1" name="mychecks1" value="1">Musical?
</span><span>&nbsp;&nbsp;</span><span style="white-space: nowrap;"><span>Does this music transport you to heaven?
  (1 for yuk, 5 for wow!)</span><span class="radiospan"><input type="radio" id="rad_1" name="myradios0" value="1">1</span>
<span class="radiospan"><input type="radio" id="rad_2" name="myradios0" value="2">2</span><span class="radiospan">
<input type="radio" id="rad_3" name="myradios0" value="3">3</span><span class="radiospan"><input type="radio" id="rad_4" name="myradios0" value="4">4</span><span class="radiospan"><input type="radio" id="rad_5" name="myradios0" value="5">5</span></span><span>&nbsp;&nbsp;</span><span style="white-space: nowrap;"><span>Are you now a believer in God?
  (1 for not really, 5 for yeah!)</span><span class="radiospan"><input type="radio" id="rad_1" name="myradios1" value="1">1</span>
<span class="radiospan"><input type="radio" id="rad_2" name="myradios1" value="2">2</span><span class="radiospan">
<input type="radio" id="rad_3" name="myradios1" value="3">3</span><span class="radiospan"><input type="radio" id="rad_4" 
name="myradios1" value="4">4</span><span class="radiospan"><input type="radio" id="rad_5" name="myradios1" value="5">5</span></span><span>&nbsp;&nbsp;</span><br style="clear: both;"><select id="mydropdown0">
<option value="0">Please Select religion</option><option value="318">Jewish</option><option value="319">Hindu</option>
<option value="320">Christian</option><option value="321">Muslim</option><option value="322">Atheist</option><option value="323">Other</option></select><span> </span></div>
4

2 に答える 2

0

私はあなたがこのようなものが欲しいと信じています。https://jsfiddle.net/gjaw8sd2/

HTML

<div id="newDivCenter">
<div class="input-group">
    <input id="chk0" name="mychecks0" type="checkbox" value="1">Audible?
</div>

<div class="input-group">
    <input id="chk1" name="mychecks1" type="checkbox" value="1">Musical?
</div>

<div class="block-row">
    <span>Does this music transport you to heaven? (1 for yuk, 5 for
    wow!)</span>
    <div class="input-group">
        <div class="radiodiv">
            <input id="rad_1" name="myradios0" type="radio" value="1">1
        </div>
        <div class="radiodiv">
            <input id="rad_2" name="myradios0" type="radio" value="2">2
        </div>
        <div class="radiodiv">
            <input id="rad_3" name="myradios0" type="radio" value="3">3
        </div>
        <div class="radiodiv">
            <input id="rad_4" name="myradios0" type="radio" value="4">4
        </div>
        <div class="radiodiv">
            <input id="rad_5" name="myradios0" type="radio" value="5">5
        </div>
    </div>
</div>
<div>
    &nbsp;&nbsp;
</div>
<div class="block-row">
    <span>Are you now a believer in God? (1 for not really, 5 for
    yeah!)</span>
    <div class="input-group">
        <div class="radiodiv">
            <input id="rad_1" name="myradios1" type="radio" value="1">1
        </div>
        <div class="radiodiv">
            <input id="rad_2" name="myradios1" type="radio" value="2">2
        </div>
        <div class="radiodiv">
            <input id="rad_3" name="myradios1" type="radio" value="3">3
        </div>
        <div class="radiodiv">
            <input id="rad_4" name="myradios1" type="radio" value="4">4
        </div>
        <div class="radiodiv">
            <input id="rad_5" name="myradios1" type="radio" value="5">5
        </div>
    </div>
</div>
<div class="input-group">
<select id="mydropdown0">
    <option value="0">
        Please Select religion
    </option>
    <option value="318">
        Jewish
    </option>
    <option value="319">
        Hindu
    </option>
    <option value="320">
        Christian
    </option>
    <option value="321">
        Muslim
    </option>
    <option value="322">
        Atheist
    </option>
    <option value="323">
        Other
    </option>
</select>
</div>
<div></div>

CSS

.radiospan {
    font-family: Verdana;
}

.checkspan {
    display: block;
    font-family: Verdana;
}

#newDivCenter span {
  display: inline-block;
}

.block-row {
  display: block;
}
.input-group {
  display: inline-block;
}
.radiodiv {
  display: inline;
}

#newDivCenter {
    background-color: yellow;
    text-align: center;

    max-width:840px;
}
于 2016-08-30T19:17:45.333 に答える