Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/78.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 如何在单选/复选框输入下不进行标签文本换行?_Html_Css - Fatal编程技术网

Html 如何在单选/复选框输入下不进行标签文本换行?

Html 如何在单选/复选框输入下不进行标签文本换行?,html,css,Html,Css,在radio/checkbox输入下不使用标签文本换行的最干净和最简单的方法是什么。该解决方案应适用于所有浏览器的流畅/响应布局,最好是向后兼容。我在下面提供了一个JSFiddle HTML代码 HTML代码 HTML代码 您希望达到什么效果?标签文本不应在输入下换行。空白:nowrap?您正在使用的预计会强制换行,您正在询问如何防止换行。这是不一致的。如果您的意思是,即使文本换行为多行,如何使文本显示在checbox的右侧,那么最明显和最可靠的解决方案是使用表。如果真的有什么东西可以排除

在radio/checkbox输入下不使用标签文本换行的最干净和最简单的方法是什么。该解决方案应适用于所有浏览器的流畅/响应布局,最好是向后兼容。我在下面提供了一个JSFiddle

HTML代码

HTML代码

HTML代码


您希望达到什么效果?标签文本不应在输入下换行。
空白:nowrap?您正在使用的

预计会强制换行,您正在询问如何防止换行。这是不一致的。如果您的意思是,即使文本换行为多行,如何使文本显示在checbox的右侧,那么最明显和最可靠的解决方案是使用表。如果真的有什么东西可以排除表,那么你应该指定它(这样人们就可以猜出可接受的标准是什么)。Jukka K.Korpela-我只喜欢在绝对必要的时候使用表,比如显示大量数据。我愿意使用
display:table。这只是使用多个COL的响应式设计的大型网站的一小部分。文本只是虚拟文本。如果这有帮助的话,我可以创建一个更复杂的类似于实际网站的JSFIDLE。您希望达到什么效果?标签文本不应该在输入下包装。
white space:nowrap?您正在使用的

预计会强制换行,您正在询问如何防止换行。这是不一致的。如果您的意思是,即使文本换行为多行,如何使文本显示在checbox的右侧,那么最明显和最可靠的解决方案是使用表。如果真的有什么东西可以排除表,那么你应该指定它(这样人们就可以猜出可接受的标准是什么)。Jukka K.Korpela-我只喜欢在绝对必要的时候使用表,比如显示大量数据。我愿意使用
display:table。这只是使用多个COL的响应式设计的大型网站的一小部分。文本只是虚拟文本。如果这有帮助的话,我可以创建一个更复杂的JSFIDLE,类似于实际的网站。
<ul>
  <li>
    <input name="item1" id="item1" type="checkbox">
    <label for="item1">
        Select this if the answer is yes<br/> 
        <span>1111111111111</span>
    </label>
  </li>        
  <li>
    <input name="item2" id="item2" type="checkbox">
    <label for="item2">
        Select this if the answer is maybe<br />
        <span>1111111111112</span>
    </label>
  </li>             
  <li>
    <input name="item3" id="item3" type="checkbox">
    <label for="item3">
        Select this if the answer is no<br />
        <span>1111111111113</span>
    </label>
  </li>
</ul>
ul{
    list-style:none;
    margin:0;
    padding:0;
}

li{
    margin-bottom:10px;
}
<ul>
<li>
    <input name="item1" id="item1" type="checkbox">
    <label for="item1">
        Select this if the answer is yes<br/> 
        <span>1111111111111</span>
    </label>
</li>        
<li>
    <input name="item2" id="item2" type="checkbox">
    <label for="item2">
        Select this if the answer is maybe<br />
        <span>1111111111112</span>
    </label>
</li>             
<li>
    <input name="item3" id="item3" type="checkbox">
    <label for="item3">
        Select this if the answer is no<br />
        <span>1111111111113</span>
    </label>
</li>
</ul>
ul{
list-style:none;
margin:0;
padding:0;
}

li{
margin-bottom:10px;
}

input{
float:left;
margin-right:10px;
}

label{
overflow:auto;
display:block;
}