2017-10-28 4 views
0

このjfiddlecssだけを使ってhtmlのオプションを並べて表示するには?

jsfiddle

に、私は私を達成できるように、私は、横並びを示す(その5行のテキストエリアのようにそれを視覚化するオプションを使用して「サイズ」)HTMLのオプションを選択しておく必要がありこのCSSを使用する目標

select { 
    width: 100%; 
} 
select#myselect option { 
    width: 6%; 
    float: left; 
    border: 1px solid; 
    text-align: -webkit-center; 
    border-color: darkgray; 
} 

しかし、それはクロムのみで完全に機能しています。 Firefoxでは、オプション "float:left"は機能しないように見え、オプションは他のものの下に表示されます。 Safariでは、オプション "width:6%"は機能しません。オプション要素は選択範囲の幅の100%を占めます。ボーダーは機能していませんが、これはあまり重要ではありません

すべてのブラウザで同じクロム結果を得ることは可能ですか?

EDIT:追加:オプションに「ディスプレイのインラインは」彼らにFirefoxの上に並べて表示しますが、すべては、このjsfiddleでのように、まったく表示しないように、最後の要素で、その結果、1つの行に行く

Jsfiddle

答えて

2

display: inline;をCSSに追加します。

+1

サファリでテストできません。 – wazz

+1

より具体的でなければなりません。 'select#myselect option' cssに追加しましたか? – wazz

+0

Fiddle:https://jsfiddle.net/wazz/uo48vzpy/ – wazz

0

Safariは左が<option>、フローティングinlineinline-block NOREをサポートしていないと、私は正当な理由で、思う:まず、<select><option>がそのように動作するようにメンターと、secoundary、display:inlineが完全にある原因とされていない原因要素自体のiphoneレンダリングと互換性がありません。 が原因で、要素のwithを制御する可能性もサポートされていません。

関連する問題