5

選択ボックスがあり、次のように、オプションのテキストの一部を左に揃え、残りを右に揃える必要があります。

| option 1      0.5 |
| option 2      1.5 |

それは可能ですか？オプションにdivを入れることを考えましたが、それが許可されているかどうかを検索する際に、許可されていないと言った場所に出くわしました。

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

4

3 に答える 3

4

option要素の内容はプレーンテキスト（タグは認識されません）と見なされるため、直接行う方法はありません。不器用な回避策として、等幅フォントを使用してオプションを手動でフォーマットし、改行なしスペースを使用できます。

    <style>
    select, option { font-family: Consolas,  monospace; }
    </style>
    <select>
    <option>option 1          0.5
    <option>option 2          1.5
    <option>one more option 110.5
    </select>

（option要素内のスペースがノーブレークスペース&nbsp;である場合。オーサリング環境でノーブレークスペースを入力する方法がわからない場合に使用します）。

まったく異なる回避策またはアプローチは、select要素を一連のチェックボックス（または、必要なロジックによってはラジオボタン）と関連するラベルに置き換えることです。次に、このデータをテーブルで表し、適切なフォーマットを設定できます。

    <table>
    <tr><td><input type=checkbox> <td>option 1 <td align=right>0.5
    <tr><td><input type=checkbox> <td>option 2<td align=right>1.5
    <tr><td><input type=checkbox> <td>one more option <td align=right>110.5
    </table>

于 2012-09-16T11:39:55.157 に答える
1

あなたが述べたようにselectタグの中にdivを入れることができないので、それは一種の問題です。選択タグ内の唯一のオプションはであり、ここで詳細を読むことができます：optgroup

オプションタグ自体の内部を編集しようとしているので、それはあまり役に立ちませんが。選択したボックスのサイズと組み合わせてスペースを使用して整理し、好みの配置に合わせるようにすることをお勧めします。

于 2012-09-15T21:00:21.867 に答える
1

現時点では、適切なスペースを挿入する回避策を引き続き検討しています。

select option {
     font-family: monospace;
 }
<select>
  <option>TEXT ONE&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.02</option>
  <option>LONG TEXT&nbsp;&nbsp;&nbsp;&nbsp;1.00</option>
  <option>TEXT&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;100.00</option>
</select>

私は通常、いくつかの JavaScript コードでそれを解決します。

max_chars_col_1 = Math.max('TEXT ONE'.length, 'LONG TEXT'.length, ...);

option.innerHTML = 'TEXT ONE' + '&#160'.repeat( max_chars_col_1 - 'TEXT ONE'.length + max_chars_col_2 - '0.02'.length + 1 ;
于 2016-12-07T20:27:29.303 に答える