0

Facebookの「友達を招待」の選択のような選択をコーディングしようとしています。各アイテムの選択をシミュレートする背景ではなく、デフォルトのチェックボックスを使用しているため、気に入っています。

問題は、必要に応じてテキスト (友人の名前) を 2 行に分割する方法がわからないことです (テキストが大きすぎます)。

私が達成しようとしていることの簡単な例があります。HTMLは次のとおりです。

<div class="modal">
  <div class="modal-body">
    <ul class="unstyled">
      <li class="store_selectable">
        <input class="checkbox" type="checkbox">
        <a href="#">
        <div class="store-text">
          <div class="iblock"><img alt="Missing" src="http://placehold.it/30x30"></div>
          <div class="text"><div>This is the store</div></div>
        </div>
      </a>
    </li>
  </ul>

な

CSS は次のとおりです。

body {
    padding: 20px;
}

li.store_selectable {
    width:161px;
    float:left;
    margin:0 0px 6px 0px;
    overflow:hidden;
    font-size:0.9em;
}

li.store_selectable .checkbox {
    float:left;
    display:inline-block;
    margin:12px 6px 0;
}

li.store_selectable .store-text {
    display:block;
    height:30px;
}

li.store_selectable img {
    float:left;
    display:block;
    width:30px;
    height:30px
}

li.store_selectable a {
    display:block;text-decoration:none;
    padding:2px;
    outline:none;
    color:#333;
    border:1px solid #fff;
    border-width:1px 0;
}

li.store_selectable a:hover {
    background:cyan;
    border:1px solid blue;
    border-width:1px 0;
}

li.store_selectable .iblock {
    display:inline-block;
    vertical-align:middle;
    overflow:hidden;
    text-align:left;
}

テストと理解を容易にするために、ここに jsfiddle を作成しました: http://jsfiddle.net/rikas/tpqHd/1/

今、私がやろうとしているのは、リスト項目の幅が十分に小さい場合、テキストを 2 行に分割し、次の行を変更することです: width:161px;. Facebook の「友達を招待」モーダル ウィンドウの CSS をいじっています。

ご協力いただきありがとうございます！

4

1 に答える 1

0

達成しようとしているインターフェースについてはよくわかりませんが、テキストがラップされない理由はcssです

     overflow:hidden;

それを削除した後、チェックボックスとテキストをクラス .fl で独自の div 要素に配置することを検討してください

    .fl { display:block; }

それらを並べて並べる

2 つの直下に、.clear のクラスを持つ別の空の div 要素を作成します

    .clear { display:block; clear:both; line-height:0; }

次の要素が float:left を継承するのを防ぐ

于 2012-05-18T17:56:34.550 に答える