使用div显示块中的复选框 [英] Displaying check boxes within a block using a div

问题描述

我试图在一个块内显示如下复选框。

 < div style = width：145px; background-color：#FFF; height：80px; border：1px double＃336699; padding-left：2px;> 
< label for =chk1>< input type =checkboxid =chk1name =chk_param> xxxx< / label>< br / 
< label for =chk2>< input type =checkboxid =chk2name =chk_param> aaaa< / label>< br / 
< label for =chk3>< input type =checkboxid =chk3name =chk_param> aaaa< / label>< br / 
< label for =chk4>< input type =checkboxid =chk4name =chk_param> aaaa< / label>< br / 
< label for =chk5>< input type =checkboxid =chk5name =chk_param> aaaa< / label>< br / 
< label for =chk6>< input type =checkboxid =chk6name =chk_param> aaaa< / label>< br / 
< label for =chk7>< input type =checkboxid =chk7name =chk_param> aaaa< / label>< br / 
< label for =chk8>< input type =checkboxid =chk8name =chk_param> aaaa< / label>< br / 
< / div> 
  

，并显示预期内容，如下所示。

在这种情况下，一个（或多个）复选框标签是非常长的， / p>

 < label for =chk1> 
< input type =checkboxid =chk1name =chk_param> xxxxxxxxxxxxxxxxxxxxxxxxxxxx 
< / label>< br / 
  

这是什么解决方案？

解决方案

/ div>

使用CSS属性 white-space：nowrap; 像这样 我的小提琴

预览

HTML

 < div style =overflow：auto; width：145px; background-color：#FFF; height：80px; border：1px double＃336699; padding -left：2px;> 
< label for =chk1>< input type =checkboxid =chk1name =chk_param> xxxxxxxxxxxxxxxxxxxxxxxxxx< / label>< br / 
< label for =chk2>< input type =checkboxid =chk2name =chk_param> aaaa< / label>< br / 
< label for =chk3>< input type =checkboxid =chk3name =chk_param> aaaa< / label>< br / 
< label for =chk4>< input type =checkboxid =chk4name =chk_param> aaaa< / label>< br / 
< label for =chk5>< input type =checkboxid =chk5name =chk_param> aaaa< / label>< br / 
< label for =chk6>< input type =checkboxid =chk6name =chk_param> aaaa< / label>< br / 
< label for =chk7>< input type =checkboxid =chk7name =chk_param> aaaa< / label>< br / 
< label for =chk8>< input type =checkboxid =chk8name =chk_param> aaaa< / label>< br / 
< / div> 
  

CSS

$ b

 标签{
 white-space：nowrap; 
} 
  

I'm trying to display checkboxes within a block as follows.

<div style="overflow: auto; width: 145px; background-color: #FFF; height: 80px; border: 1px double #336699; padding-left: 2px;">
    <label for="chk1"><input type="checkbox" id="chk1" name="chk_param">xxxx</label><br/>
    <label for="chk2"><input type="checkbox" id="chk2" name="chk_param">aaaa</label><br/>
    <label for="chk3"><input type="checkbox" id="chk3" name="chk_param">aaaa</label><br/>
    <label for="chk4"><input type="checkbox" id="chk4" name="chk_param">aaaa</label><br/>
    <label for="chk5"><input type="checkbox" id="chk5" name="chk_param">aaaa</label><br/>
    <label for="chk6"><input type="checkbox" id="chk6" name="chk_param">aaaa</label><br/>
    <label for="chk7"><input type="checkbox" id="chk7" name="chk_param">aaaa</label><br/>
    <label for="chk8"><input type="checkbox" id="chk8" name="chk_param">aaaa</label><br/>
</div>

and it displays what is expected as shown in the following snap shot.

When any one (or more) of the checkbox labels is longer than the width specified, a horizontal scroll bar appears which is expected but it displays the checkbox label text below the checkbox as shown in the following snap shot.

In this case, one (or more) of the checkbox labels is very long something like the following.

<label for="chk1">
  <input type="checkbox" id="chk1" name="chk_param">xxxxxxxxxxxxxxxxxxxxxxxxxxxx
</label><br/>

What is the solution to this? Every checkbox with its label should be displayed in a straight line within the block irrespective of how long the label text is.

解决方案

Use CSS property white-space: nowrap; like this My Fiddle

Preview

HTML

<div style="overflow: auto; width: 145px; background-color: #FFF; height: 80px; border: 1px double #336699; padding-left: 2px;">
    <label for="chk1"><input type="checkbox" id="chk1" name="chk_param">xxxxxxxxxxxxxxxxxxxxxxxxxx</label><br/>
    <label for="chk2"><input type="checkbox" id="chk2" name="chk_param">aaaa</label><br/>
    <label for="chk3"><input type="checkbox" id="chk3" name="chk_param">aaaa</label><br/>
    <label for="chk4"><input type="checkbox" id="chk4" name="chk_param">aaaa</label><br/>
    <label for="chk5"><input type="checkbox" id="chk5" name="chk_param">aaaa</label><br/>
    <label for="chk6"><input type="checkbox" id="chk6" name="chk_param">aaaa</label><br/>
    <label for="chk7"><input type="checkbox" id="chk7" name="chk_param">aaaa</label><br/>
    <label for="chk8"><input type="checkbox" id="chk8" name="chk_param">aaaa</label><br/>
</div>​

CSS

label {
   white-space:nowrap;
}​

这篇关于使用div显示块中的复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！