web-dev-qa-db-fra.com

Comment aligner les éléments d'entrée HTML?

J'espère trouver une ressource pour aligner les éléments d'entrée dans une page HTML. Je trouve difficile d'obtenir un élément sélectionné et une zone de texte ayant la même largeur même lorsque vous utilisez l'attribut style de largeur, ce qui est encore plus difficile entre navigateurs. Enfin, les entrées de fichier semblent impossibles à obtenir dans la même largeur de navigateur. Existe-t-il de bons guides ou conseils pour y parvenir? Je devrais peut-être définir certains attributs CSS par défaut.

htmlcsscss-reset
24
Greg

J'ai testé cela dans Internet Explorer 7, Firefox 3 et Safari/Google Chrome. Je vois vraiment le problème avec <select> et <input type="file">. Mes conclusions ont montré que si vous modifiiez toutes les entrées de la même largeur, le <select> serait plus court d'environ 5 pixels dans tous les navigateurs.

Utiliser le script de réinitialisation CSS de Eric Meyer ne résout pas le problème. Toutefois, si vous élargissez simplement vos entrées <select> de 5 pixels, vous obtiendrez un très bon (mais pas parfait) alignement dans les principaux navigateurs. Le seul qui diffère est Safari/Google Chrome, et il semble être plus large de 1 ou 2 pixels que tous les autres navigateurs.

En ce qui concerne le <input type="file">, vous n’avez pas beaucoup de souplesse pour le style ici. Si JavaScript est une option pour vous, vous pouvez implémenter la méthode indiquée sur quirksmode pour mieux contrôler le style du contrôle de téléchargement de fichier.

Voir mon exemple de travail complet ci-dessous dans XHTML 1.0 Strict pour un formulaire typique avec des largeurs de saisie cohérentes. Notez que cela n’utilise pas l’astuce 100% largeur évoquée par d’autres ici parce qu’il a le même problème avec des largeurs incohérentes. De plus, aucune table n'est utilisée pour rendre le formulaire, car les tables ne devraient être utilisées que pour les données tabulaires et non pour la présentation.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Example Form</title>
  <style type="text/css">
    label, input, select, textarea {
        display: block;
        width: 200px;
        float: left;
        margin-bottom: 1em;
    }

    select {
        width: 205px;
    }

    label {
        text-align: right;
        width: 100px;
        padding-right: 2em;
    }

    .clear {
      clear: both;
    }
  </style>
</head>
<body>
  <form action="#">
    <fieldset>
      <legend>User Profile</legend>
      <label for="fname">First Name</label>
      <input id="fname" name="fname" type="text" />
      <br class="clear" />

      <label for="lname">Last Name</label>
      <input id="lname" name="lname" type="text" />
      <br class="clear" />

      <label for="fav_lang">Favorite Language</label>
      <select id="fav_lang" name="fav_lang">
        <option value="c#">C#</option>
        <option value="Java">Java</option>
        <option value="Ruby">Ruby</option>
        <option value="python">Python</option>
        <option value="Perl">Perl</option>
      </select>
      <br class="clear" />

      <label for="bio">Biography</label>
      <textarea id="bio" name="bio" cols="14" rows="4"></textarea>
      <br class="clear" />
    </fieldset>
  </form>
</body>
</html>
17
cowgod

Je les mets généralement dans une cellule div ou un tableau (horreurs! Je sais) de la largeur souhaitée, puis je règle le style de sélection et d'entrée: width à 100% pour qu'ils remplissent la div/cellule dans laquelle ils se trouvent.

13
Ron Savage

J'ai trouvé que si vous définissez select et input la bordure et le remplissage de l'élément à 0, ils ont la même largeur. (Testé sur Chrome 14, Firefox 7.0.1, Opera 11.51, IE 9)

Le fait de placer une bordure/un remplissage de 1px sur les éléments select et input élargit l’élément input de 2 pixels. Par exemple:

<form class="style">
    <input name="someInput" />
    <select name="options">
        <option value="1">Value 1</option>
        <option value="2">Value 2</option>
    </select>
</form>

.style select {
    width: 100px;
    padding: 1px;
    border: 1px solid black;
}
.style input {
    width: 96px; /* -2 px for 1px padding(1px from each side) and -2px for border
    (select element seems to put border inside, not outside?) */
    padding: 1px;
    border: 1px solid black;
}
2
Dalius

En dehors de la largeur, je définirais également les bordures et les marges, celles-ci pouvant ou non influencer vos contrôles Quelque chose comme ça peut aider:

input, select {
    width: 100px;
    margin: 0px;
    border: 1px solid;
}

Ron a aussi une bonne idée.

1
Matthew Scharley

En effet, avec <entrée>, la bordure et le remplissage sont ajoutés à la largeur (comme avec la plupart des autres éléments). Avec <select>, la bordure et le remplissage sont inclus dans la largeur, tout comme dans l'ancien mode IE quirks.

Vous pouvez contourner ce problème en augmentant la largeur pour en tenir compte:

input  { width: 200px; padding: 10px; border-width:5px; }
select { width: 230px; padding: 10px; border-width:5px; }

Ou (si vous pouvez compter sur le support du navigateur), vous pouvez utiliser la nouvelle propriété CSS3 box-sizing pour les faire se comporter de manière cohérente et pour dessiner un remplissage et une bordure en dehors de la largeur de l'élément:

input, select {
  width: 200px;
  padding: 10px;
  border-width:5px;
  -webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: content-box;    /* Firefox, other Gecko */
  box-sizing: content-box;         /* Opera/IE 8+ */
}

Vous pouvez également définir la taille de la boîte sur bordure-boîte pour que les entrées se comportent comme les sélections, le remplissage étant tracé à l'intérieur de la largeur de la boîte.

Testé dans Chrome, IE8, FF

0
Jim

Si vous avez désespérément besoin de {width: 100%; } et non spécifié avec des largeurs en pixels, alors jQuery est votre ami:

$(function () {
    var allSelects = $('input[type="text"], textarea');
    allSelects.css('width', (allSelects.width()-6)+'px');
}

-6 pixels me convient le mieux (FF9), modifiez-le à votre guise.

0
Slawa

Je ne pense pas Ron's l'idée fonctionne ...

cas de test:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <link href="styles/reset.css" rel="stylesheet" type="text/css"/>

    <style type="text/css">
        input, select{
            width: 100%;
        }
    </style>
</head>
<body>

<div style="width: 200px;">
    <input type="text">
    <select>
        <option>asdasd</option>
        <option>asdasd</option>
    </select>

</div>

</body>
</html>

Il en résulte que l'entrée est plus large que le fichier sélectionné (cela dépend probablement du système d'exploitation). Je ne sais pas si cela pourrait être réalisé, même avec l'astuce de + 5 pixels, car le style de la sélection semble dépendre de l'OS (au moins du thème Windows).

0
AlfaTeK

Les entrées de fichier peuvent être fondamentalement différentes d'un navigateur à l'autre et ne permettent certainement pas beaucoup de personnalisation, ce qui peut être gênant, mais je comprends aussi pourquoi c'est du point de vue de la sécurité. Par exemple, essayez de changer le texte du bouton "Parcourir" qui apparaît sur la plupart des navigateurs, ou comparez l'entrée de fichier sur Safari à d'autres navigateurs ...

0
mmacaulay

Commencez-vous vos fichiers CSS avec quelques paramètres de base? Il peut être utile de désactiver le remplissage et la marge sur tous les éléments. Je n'ai pas testé pour voir si cela pourrait affecter les éléments de sélection/entrée.

Voici un exemple de réinitialisation CSS d'Eric Meyer:

http://meyerweb.com/eric/ Thoughts/2007/05/01/reset-reloaded/

0
Dave Rutledge