2

次のようにブロック内にチェックボックスを表示しようとしています。

<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>

次のスナップショットに示すように、予想される内容が表示されます。

ここに画像の説明を入力

チェックボックス ラベルの 1 つ (または複数) が指定された幅よりも長い場合、水平スクロール バーが表示されますが、これは想定どおりですが、次のスナップショットに示すように、チェックボックスの下にチェックボックス ラベル テキストが表示されます。

ここに画像の説明を入力

この場合、チェックボックスのラベルの 1 つ (または複数) が次のような非常に長いものになります。

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

これに対する解決策は何ですか？ラベル付きのすべてのチェックボックスは、ラベル テキストの長さに関係なく、ブロック内に直線で表示する必要があります。

4

2 に答える 2

2

white-space: nowrap;このMy FiddleのようなCSS プロパティを使用します

プレビュー

ここに画像の説明を入力

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;
}​
于 2012-10-14T16:14:33.350 に答える
1

次の 5 つの CSS プロパティをラベルに追加できます。

label {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

http://jsfiddle.net/USdKK/

スクリーンショット

于 2012-10-14T16:16:28.590 に答える