web-dev-qa-db-ja.com

列を使用しながら物事を並べる

私には不可能なリクエストがあります。

フォームの要素を並べて、入力がすべて同じ場所から始まるようにします。

Name:                            [                           ]
Company:                         [                           ]
Some question with a long name: [                           ]

しかし、私のリストは（多少）長いので、十分な幅のある画面の複数の列に表示したいと思います。

理想的には、妥当な数のブラウザーで機能するPOSHメソッド（table-freeが意味的に適切であると思います）を見つけるでしょう。

現在のページではテーブルを使用しています。私はCSSを試しました

columns: auto; 
-moz-column-count: auto; 
-moz-column-width: auto; 
-webkit-column-count: auto; 
-webkit-column-width: auto;

ただし、Firefoxは（少なくとも）列をまたいでテーブルを分割しません。

htmlsemantic-webtableless
2
Charles

CSS display: inline-blockを使用するのが最善の方法です。ブラウザーの互換性のニーズによっては、最新のブラウザーでのみ一貫してサポートされるため、いくつかの回避策を使用する必要があります。

List Apartには、inline-block設定の使用方法に関する良い記事があります： Prettier Accessible Forms 。

次に、一部の部分をラップするかどうかを決めるために、通常のWordブレーク/非ブレーク またはwidth: ...仕様を使用します。

1
Mufasa