35

私は一連のチェックボックスをレイアウトしていますが、テキストが長すぎる場合にチェックボックスの下でテキストが折り返されるという昔からの問題に遭遇しています。

私の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/

さまざまなサイトで多くの検索を行った後、合理的な解決策が見つからないようです。マークアップ/スタイルの変更に関する提案は受け付けていますが、コードをできるだけクリーンでセマンティックなものにしたいと考えています。

ありがとう！

4

8 に答える 8

34

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

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

labelaをmargin-left18px に、チェックボックスを -18px にしmargin-leftました。

Chrome & IE9 で動作するようです。

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

于 2013-02-05T23:06:21.320 に答える
5

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

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

于 2013-02-05T19:05:15.457 に答える
0

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

于 2013-02-05T19:31:11.477 に答える
0

この場合の最も簡単な解決策は、レイアウトにテーブルを使用することです。おそらくテーブルは悪であるためにCSSの千の異なる順列をいじるのではなく、これは100％の時間で機能します。

<table>
  <tr>
    <td><input type=checkbox id=blah><label ='blah'></label></td>
    <td><label for='blah'>Long label here...</td>
   </tr>
</table>

また、スタイリング目的でチェックボックスの横にラベルが必要な場合は、そこで空のラベル タグを使用し、2 番目のテーブル セルで実際のラベルを使用します。(はい、同じチェックボックスに複数のラベルを使用できます)

于 2020-12-17T20:15:49.447 に答える