web-dev-qa-db-fra.com

Aligner des choses en utilisant des colonnes

J'ai une demande qui peut ne pas être possible.

J'aimerais aligner les éléments d'un formulaire pour que les entrées commencent toutes au même endroit:

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

Mais ma liste est (un peu) longue et je voudrais les afficher en plusieurs colonnes sur des écrans suffisamment larges.

Idéalement, je trouverais une méthode POSH (je pense que la méthode free-table est sémantiquement appropriée) qui fonctionne sur un nombre raisonnable de navigateurs.

Ma page actuelle utilise un tableau. J'ai essayé le CSS avec

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

mais Firefox (au moins) ne divisera pas une table sur plusieurs colonnes.

htmlsemantic-webtableless
2
Charles

Utiliser le CSS display: inline-block serait le meilleur moyen de le faire. En fonction des besoins de compatibilité de votre navigateur, vous devrez peut-être utiliser certaines solutions de contournement, car elles ne sont prises en charge que de manière cohérente par les navigateurs modernes.

A List Apart a un bon article sur la façon d'utiliser le paramètre inline-block: Formulaires accessibles plus jolis .

Ensuite, pour que certaines parties soient emballées ou non, il suffit d’utiliser les spécifications habituelles de décomposition/non-décompression de Word   ou width: ....

1
Mufasa