web-dev-qa-db-ja.com

チェックボックスの下でテキストが折り返されないようにする

チェックボックスのセットをレイアウトしていて、テキストが長すぎる場合、チェックボックスの下で古くなったテキストの折り返しの問題に遭遇しています。

私のHTML：

<div class="right">
    <form id="updateProfile">
        <fieldset class="checkboxes">
            <p>4. What is your favorite type of vacation?</p>
            <label><input type="checkbox" name="vacation" value="Ski Trips"> Ski Trips</label>
            <label><input type="checkbox" name="vacation" value="Beach Visits"> Beach Visits</label>
            <label><input type="checkbox" name="vacation" value="Cruises"> Cruises</label>
            <label><input type="checkbox" name="vacation" value="Historical and educational trips"> Historical and educational trips</label>
            <label><input type="checkbox" name="vacation" value="Yachting"> Yachting</label>
            <label><input type="checkbox" name="vacation" value="Road Trip"> Road Trip</label>
            <label><input type="checkbox" name="vacation" value="Spa Weekend"> Spa Weekend</label>
            <label><input type="checkbox" name="vacation" value="Bed and Breakfast"> Bed and Breakfast</label>
            <label><input type="checkbox" name="vacation" value="Stay home and relax"> Stay home and relax</label>
            <label><input type="checkbox" name="vacation" value="Gambling Trips"> Gambling Trips</label>
            <label><input type="checkbox" name="vacation" value="Volunteer"> Volunteer</label>
        </fieldset>
    </form>
</div>

私のCSS：

div.right{width:580px;}

form#updateProfile fieldset label{
    display: block;
    margin-bottom: 5px;
    font-size: 16px;
    float: left;
    width: 33%;
}

ここで私のフィドルを参照してください： http://jsfiddle.net/fmpeyton/7WmGr/

さまざまなサイトを何度も検索した後、適切な解決策を見つけることができないようです。マークアップやスタイルの変更に関する提案をお待ちしていますが、コードをできるだけクリーンでセマンティックにしたいと考えています。

ありがとう！

htmlcsslayoutcheckbox
26
Fillip Peyton

これはうまくいくようです：

http://jsfiddle.net/7WmGr/5/

label a margin-left of 18pxおよびチェックボックスa margin-left/-18ピクセル。

HTML：

<div class="right">
    <form id="updateProfile">
        <fieldset class="checkboxes">
            <p>4. What is your favorite type of vacation?</p>
            <label><input type="checkbox" name="vacation" value="Ski Trips"> Ski Trips</label>
            <label><input type="checkbox" name="vacation" value="Beach Visits"> Beach Visits</label>
            <label><input type="checkbox" name="vacation" value="Cruises"> Cruises</label>
            <label><input type="checkbox" name="vacation" value="Historical and educational trips"> Historical and educational trips</label>
            <label><input type="checkbox" name="vacation" value="Yachting"> Yachting</label>
            <label><input type="checkbox" name="vacation" value="Road Trip"> Road Trip</label>
            <label><input type="checkbox" name="vacation" value="Spa Weekend"> Spa Weekend</label>
            <label><input type="checkbox" name="vacation" value="Bed and Breakfast"> Bed and Breakfast</label>
            <label><input type="checkbox" name="vacation" value="Stay home and relax"> Stay home and relax</label>
            <label><input type="checkbox" name="vacation" value="Gambling Trips"> Gambling Trips</label>
            <label><input type="checkbox" name="vacation" value="Volunteer"> Volunteer</label>
        </fieldset>
    </form>
</div>

CSS：

div.right{width:598px;}

form#updateProfile fieldset label{
    display: block;
    margin-bottom: 5px;
    font-size: 16px;
    float: left;
    width: 30%;
    margin-left:18px;
}
form#updateProfile fieldset label input[type='checkbox']{margin-left:-18px;}

CromeとIE9で動作するようです。

29
Fillip Peyton

私はこれが好き ...

HTML：

<input type="checkbox" name="vacation" value="Ski Trips"><label>very long label ...</label>

CSS：

input[type="checkbox"] { 
    position: absolute;
}
input[type="checkbox"] ~ label { 
    padding-left:1.4em;
    display:inline-block;
}
6
Christian Michael

1つのオプションは次のようなものです。

form#updateProfile fieldset label{
    display: block;
    margin-bottom: 5px;
    font-size: 16px;
    float: left;
    width: 30%;
    padding-left: 3%;
    position: relative;
}

input {
    position: absolute;
    left: -5px;
}

ここのデモ： http://jsbin.com/opoqon/1/edit

私が行う傾向がある方法は異なります。これはinputsをlabelsでラップせず、むしろ次のようなことをします

<input id="ski-trips" type="checkbox" name="vacation" value="Ski Trips"><label for="ski-trips">Ski Trips</label>

これにより、スタイル設定が簡単になります。

これがその方法の例です： http://jsbin.com/otezut/1/edit

しかし、どちらの方法でも機能します。

5
gotohales

以下は、入力要素のサイズへの依存度が低いものです。

div {width: 12em;}

label {
  display: block;
  white-space: nowrap;
  margin: 10px;
}

label input {
  vertical-align: middle;
}

label span {
  display: inline-block;
  white-space: normal;
  vertical-align: top;
  position: relative;
  top: 2px;
}
<div>

<label><input type="radio"><span>I won't wrap</span></label>
<label><input type="checkbox"><span>I won't wrap</span></label>

<label><input type="radio"><span>I am a long label which will wrap</span></label>
<label><input type="checkbox"><span>I am a long label, I will wrap beside the input</span></label>

</div>
1
Pudica

これは別のオプションです。とてもシンプルですが効果的です。あなたはラッピングしている部分を取ります。 <label><input type="checkbox" name="vacation" value="Historical and educational trips"> Historical and educational <span class="antiWrap">trips</span></label>そして、あなたはクラスでスパンを追加します。クラスをantiWrapと呼びました。次に、cssを使用して左マージンを追加します。 .antiWrap { margin-left: 18px; }これは、コードを使用したmyfiddleです。 http://jsfiddle.net/alexhram/7WmGr/3/ それがあなたの目的だと思いますか？お知らせ下さい。

0
Chakotay

私はすべてのオプションを試しましたが、最善の解決策は次のとおりです：

<div>
  <label><input type="checkbox"><span>Text</span></label>
  <label><input type="checkbox"><span>Text</span></label>
</div>

PudicaやFillipのようなHTMLが推奨されます。

そして、CSSはfloat:leftをcheckboxesに設定するだけで、テキストがチェックボックスに回り込むのを防ぐには、spanでoverflow:hiddenを使用するだけです。

[type="checkbox] {
   float: left;
}
span {
   overflow: hidden;
}

margin-leftを使用して、テキストからチェックボックスまでのスペースを指定できます。

0
Rafael Perozin