为什么我的单选按钮集不包含在最大宽度为 css 的 div 中？

Question

我有一个 div，我设置了最大宽度，背景为黄色。在 div 中，我放置了两组单选按钮（每组 5 个按钮），每个按钮都有一个关联的标签。

我不希望在单选按钮之间或关联文本和单选按钮之间的两行上设置 divide。所以我在每个集合的范围内使用 'white-space:nowrap'。另一方面，如果有两个长集，一个接一个，我希望第二个集自动转到下一行。

我看到的很有趣。我的 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>

Answer 1

spans 是内联元素，因此如果有机会它们将彼此相邻显示（内联）。如果您希望元素组显示在块中（不是内联），请将它们放在块级元素中，例如 div 或分配： display:block 到它们所在的范围。或者如果您更愿意允许如果有空间，它们将内联，但如果没有，则换行，然后使用 display: inline-block。在下面的示例中，我只是使用了您的代码并将 display:block 添加到一些包装元素中，以便您可以看到差异。

.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="display: block; 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; display: block;">
     <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>

Answer 2

我相信你想要这样的东西。 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;
}

为什么我的单选按钮集不包含在最大宽度为 css 的 div 中？

Why don't my radiobutton sets wrap in a div with a css max-width?

html

css

nowrap