0

無線オプションの調整でこの問題が発生しています。私がスタイリングしようとしているものの例は次のとおりです。

Question: How are you doing? 
A.I'm doing fine             B. OK                C. So so             D. not so good

A、B、C、Dには、それぞれクラス='オプション'のラジオボタンが接頭辞として付けられます。

Aのオプション（同様に、B、C、D）が垂直方向に整列していることを確認するために、私は次のことを行っています。

.option {
   width: 25%; 
   display: inline-block;
}

テキストが長すぎない場合、これは正常に機能します。テキストが長すぎる場合は、次のように配置する必要があります。

1）可能であれば各行に2つのオプションを設定する

A. <long A text>                                       B. <B's text> 
C. <C's text>                                          D. <D's text>

2）上記の設定1）に対してテキストのいずれかが本当に長すぎる場合は、各行に1つのオプションがあります。

A. <too long A text>
B. <B's text>
...

どうすればこの効果を達成できますか？CSSに関する提案はありますが、Jsは私にとって良いものです。

ありがとう。

4

3 に答える 3

1

適切なスタイルとパディングhtml

<ul class="short">
  <li>a long text</li>
  <li>b text</li>
  <li>c long text</li>
  <li>d text</li>
</ul>

css

ul {
   width: 500px;
}
li {float:left; margin-right:20px;}
ul.long > li { width: 500px;}
ul.med > li {width: 220px; /* (500-40)/2 */}
ul.short > li {width: 105px; /* (500-80) /2 */}

js

find width of longest li and add appropriate class to ul

フィドルhttp://jsfiddle.net/QqDgA/を参照してください

于 2013-03-26T16:05:16.037 に答える
0

順序付けされていないリストをコンテナとして使用します。

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
</ul>

リストアイテムの幅がリスト自体の1/2になるようにスタイルを設定し、左にフロートさせます。

ul, li {margin:0;padding:0;list-style:none}
ul {width:500px:}
li {float:left;width:250px}
于 2013-03-26T15:44:33.773 に答える
0

JSを使用して、リストの各項目の文字の長さを確認し、文字数に基づいて2つの異なるスタイルを設定できます。アイテムのいずれかが特定の文字数を超えている場合は、幅を25％ではなく50％にすることができます。

于 2013-03-26T15:50:22.380 に答える