0

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

我不希望集合在单选按钮之间或关联文本和单选按钮之间分成两行。所以我在每个集合的范围内使用“空白：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>
4

2 回答 2

0

跨度是内联元素，因此考虑到它们将彼此相邻显示的机会（内联）。如果您希望元素组在块中显示（而不是内联），请将它们放在块级元素中，例如 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>

于 2016-08-30T19:08:57.487 回答
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 回答