81 votes

Comment aligner du texte et des cases de la même largeur dans CSS ?

Ok c'est apparemment impossible à obtenir le droit. J'ai une zone de texte et une boîte de sélection. Je veux qu'ils soient de la même largeur à l'identique afin qu'ils s'alignent sur la marge gauche et la marge de droite.

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            input, select {
                width: 200px;
            }
        </style>
    </head>
    <body>
        <input type="text" value="ABC"><br>
        <select>
            <option>123</option>
        </select>
    </body>
</html>

Que feriez-vous que, droite? Nope. La boîte de sélection est 6px plus courte dans Firefox. Voir la capture d'écran. screenshot in firefox

Ok donc permet de modifier le code et de faire deux styles.

<style type="text/css">
    input {
        width: 200px;
    }
    select {
        width: 206px;
    }
</style>

Ok qui fonctionne!

Fixed in Firefox

Oh, attendez, le meilleur test en Chrome...

chrome screenshot

FFFFFFFUUUUUUUUUUUU

Quelqu'un peut-il me dire comment ligne dans tous les navigateurs? Pourquoi je ne peux pas juste faire width: 200px sur tout, pourquoi tous les navigateurs affichent différemment? Aussi pendant que nous y sommes pourquoi la zone de texte et sélectionnez la boîte de hauteurs différentes? Comment pouvons-nous les obtenir à la même hauteur? Ont essayé de hauteur et la hauteur de la ligne n en vain.


Solution:

Ok j'ai trouvé la solution avec l'aide de quelques réponses ci-dessous. La clé est d'utiliser la box-sizing: border-box de la propriété, de sorte lorsque vous spécifiez la largeur qui inclut la frontière et le rembourrage. Voir l'excellente explication ici. Ensuite, le navigateur ne peut pas tout.

Le Code est ci-dessous, ont également régler la hauteur de la boîte pour la même taille et de la mise en retrait du texte à l'intérieur de la boîte de sorte qu'il s'aligne. Vous devez également définir la frontière Chrome a vraiment une drôle à la recherche de la frontière qu'il utilise pour sélectionner les cases qui vont se jeter hors de l'alignement. Ce sera le travail pour le HTML5 (par exemple sites de soutien IE9, Firefox, Chrome, Safari, Opera, etc).

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            input, select {
                width: 200px;
                border: 1px solid #000;
                padding: 0;
                margin: 0;
                height: 22px;
                -moz-box-sizing: border-box;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
            }
            input {
                text-indent: 4px;
            }
        </style>
    </head>
    <body>
        <input type="text" value="ABC"><br>
        <select>
            <option>123</option>
            <option>123456789 123123123123</option>
            <option>123456789 123123123123 134213721381212</option>
        </select>
    </body>
</html>

Juste un avertissement final, vous ne voulez pas d'entrée de boutons, cases à cocher, etc pour être inclus dans ce style donc, utiliser l' input:not([type='button']) ne s'applique pas à certains types ou utiliser input[type='text'], input[type='password'] de spécifier ceux que vous souhaitez appliquer.

7voto

Chris Cannon Points 574

C'est parce que l' <input type="text" /> élément est un peu différent en style par défaut à l' <select> élément, par exemple la frontière, les rembourrages et les valeurs de marge peuvent être différentes.

Vous pouvez observer ces styles par défaut par l'intermédiaire d'un élément de l'inspecteur tels que Firebug pour Firefox ou intégré dans un pour google Chrome. De plus, ces valeurs par défaut des feuilles de style différer d'un navigateur à l'autre.

Vous avez deux options:

  1. Définir explicitement la frontière, les rembourrages et les valeurs de marge pour être le même pour les deux éléments
  2. Une feuille de style CSS reset pour être inclus avant vos propres feuilles de style CSS

Je voudrais aller avec l'option 1. parce que l'option 2. exige beaucoup de travail et vous vous retrouverez avec des tonnes de inutiles CSS. Mais certains développeurs web préfèrent commencer à partir de zéro et d'avoir un contrôle complet.

3voto

saluce Points 5086

Cela vous obtiendrez proches, mais ce niveau de précision est presque impossible.

3voto

Thomas Upton Points 958

Différents navigateurs appliquent différents styles par défaut. J’ai trouvé que réinitialiser les deux marge et marge intérieure à 0 rend les deux largeurs égales éléments dans Firefox et Chrome.

Personnellement, j’aime utiliser un minimum de style CSS reset comme YUI CSS Reset avant d’essayer de faire un dessin fière allure dans plusieurs navigateurs.

0voto

Anonymous Points 1459

Si vous utilisez les tables 4 entrées u pourrait à utiliser la solution suivante - aussi compatible avec ie7 :

Ainsi la largeur de cellule de tableau sera fixée à la largeur de l’entrée,

Et de cette façon la sélectionner donc toujours prendrait la largeur restante et parfaitement la ligne vers le haut avec entrée d.

0voto

dotNET Lady Points 94

Essayez de supprimer les frontières par défaut de ces deux éléments :

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X