web-dev-qa-db-fra.com

CSS - Même hauteur et même alignement du bouton et de la zone de texte de saisie

Je dois avoir un bouton et une boîte de texte assis l'un à côté de l'autre et ils doivent s'aligner parfaitement comme si l'un était plus gros que l'autre, il serait instantanément perceptible.

Habituellement, je ne m'occuperais pas des petites différences entre les navigateurs, mais ces deux entrées occupent une position très importante sur chaque page et constituent une grande fonctionnalité du site. Elles doivent donc s'aligner parfaitement dans tous les principaux navigateurs et niveaux de zoom.

Quelqu'un a-t-il des conseils sur la manière d'y parvenir? 

Juste comme un exemple rapide de ce que je cherche à réaliser: la nouvelle page d'accueil de Google. Après avoir commencé à taper, la saisie semi-automatique démarre et la zone de recherche est déplacée vers le haut avec un bouton bleu parfaitement aligné sur la zone de texte. Il fonctionne parfaitement avec plusieurs navigateurs, mais il est marqué dans un tableau. Est-ce que cela suggère que cela peut être le meilleur moyen d'y parvenir?

cssformscross-browser
26
David

Je suggérerais d'essayer de styler l'élément parent de la paire input/button (une fieldset, dans mon exemple) afin de donner un font-size et un font-family communs, puis d'utiliser des mesures em pour le style des dimensions/padding/marges pour les éléments enfants. . Idéalement, styler tous les éléments enfants avec le même CSS.

Compte tenu de la majoration suivante:

<form action="#" method="post">
    <fieldset>
        <label for="something">A label for the text-input</label>
        <input type="text" name="something" id="something" />
        <button>It's a button!</button>
    </fieldset>
</form>

Je suggérerais quelque chose de similaire, mais adapté à votre conception, aux CSS suivantes:

fieldset {
    font-size: 1em;
    padding: 0.5em;
    border-radius: 1em;
    font-family: sans-serif;
}

label, input, button {
    font-size: inherit;
    padding: 0.2em;
    margin: 0.1em 0.2em;
    /* the following ensures they're all using the same box-model for rendering */
    -moz-box-sizing: content-box; /* or `border-box` */
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

Démo de JS Fiddle .

Après avoir précisé qu'il s'agissait de reproduire/reproduire le style du bouton de saisie de texte/d'envoi associé de Google:

fieldset {
    font-size: 1em;
    padding: 0.5em;
    border-radius: 1em;
    font-family: sans-serif;
    border-width: 0;
}

label, input, button {
    font-size: inherit;
    padding: 0.3em 0.4em;
    margin: 0.1em 0.2em;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    border: 1px solid #f90;
    background-color: #fff;
}

input {
    margin-right: 0;
    border-radius: 0.6em 0 0 0.6em;
}
input:focus {
    outline: none;
    background-color: #ffa;
    background-color: rgba(255,255,210,0.5);
}
button {
    margin-left: 0;
    border-radius: 0 0.6em 0.6em 0;
    background-color: #aef;
}
button:active,
button:focus {
    background-color: #acf;
    outline: none;
}

Démo de JS Fiddle .

Bien que ce qui précède fonctionne bien dans Chromium 12.x et Opera 11.5 (Ubuntu 11.04), Firefox semble afficher un pixel supplémentaire ou deux dans cette dernière démonstration.

21
David Thomas

Je me suis tiré les cheveux pendant des heures pour essayer d'y parvenir. Après de nombreuses recherches et expérimentations, voici la recette pour résoudre le problème du PO dans (au moins les versions contemporaines de) Chrome, Firefox, IE, Opera et Safari:

  1. Utilisez la même CSS en ce qui concerne le modèle de boîte pour tous les types de nœuds que vous devez aligner (bouton, entrée, sélection);
  2. DOspécifier explicitement la bordure (ou au moins sa largeur);
  3. NE PAS spécifier explicitement la hauteur.

Oui, c'est tout ce qu'il y a à dire. Voici le CSS le plus minimaliste qui produit les résultats souhaités:

select, input, button {
    border-width: 0px;
}

Si vous avez besoin de plus de style, n'hésitez pas à ajouter de la couleur, du rembourrage et des marges - tout ira bien. Mais quoi que vous fassiez, NE spécifiez PAS explicitement la hauteur. C'est le seul casse-tête, car chaque navigateur calcule la hauteur différemment. certains laisseront un ou deux pixels supplémentaires au-dessus de la sélection et non le bouton, d'autres le laisseront au-dessus du bouton et non de la sélection, et d'autres fonctionneront comme prévu.

Pour mémoire, Chrome semble être le plus cohérent à cet égard (c'est-à-dire, si vous spécifiez la hauteur) - mais encore une fois, on s'en fout.

6
Bogdan Stăncescu

Je pense que c'est très résistant aux balles:

http://codepen.io/herrfischer/pen/pbkyoJ

Sur les deux éléments, utilisez simplement: 

display: inline-block;
padding: 10px 15px;
font-size: 20px;
border-radius: 0;
-webkit-appearance: none;
border: 1px solid transparent;

Et utilisez "normalize.css" - c'est tout. Ça a l'air bien sur iPhone aussi:

 enter image description here

4
Henning Fischer

J'ai vérifié de nombreuses sources sur le Web, comment procéder de manière optimale, indépendamment du thème, multi-navigateurs. J'espère avoir une solution, mais ce n'est pas à 100% (elle doit être ajustée par un remplissage CSS vertical). Mon problème était d'avoir une étiquette et une entrée de texte de même largeur et compacte.

Résultat souhaité: Wished result La solution trouvée par plusieurs expériences est décrite dans mon blog: http://vasvadev.blogspot.cz/2013/02/css-exact-same-height-and-alignment-of.html

Solution CSS:

div.lf-ui-label {
  margin: 0px;
  font-size: inherit;
  font-weight: bold;
  background-color: #CCCCCC;
  border-width: 0px;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  padding-top: 4px;
  padding-bottom: 4px;
}
div.lf-ui-label + input.lf-ui-form-item {
  padding: 5px 10px 5px 10px;
  margin: 0px 0px 0px -10px;
  font-size: inherit;
  background-color: #2b55a8 !important;
  vertical-align: middle;
  border-width: 0px;
}
input.lf-ui-form-item {
  background-color: #3b3b3b;
  font-size: inherit;
  padding: 4px 7px 4px 7px;
  font-weight: bold;
  border: none 0px;
  outline: none;
}

HTML:

<div style="padding:10px; font-family: Calibri; font-size: 14px;">
   <div class="lf-ui-label" 
    style="width:25%; padding-left: 10px;">Field text 14px&nbsp;</div><input 
    class="lf-ui-form-item" type="text" id="fr" name="fr" value="some value"      style="width:71%" />
</div>
<div  style="padding:10px; font-family: Calibri; font-size: 14px;">
  Field text <input class="lf-ui-form-item" type="text" value="some other value"/>
</div>

Mon code expérimental est partagé par JSFIDDLE: css-exact-meme-hauteur-et-alignement-de.html

1
Vaclav Svara

Votre autre option consiste à utiliser Bootstrap. Je résous ce problème en affectant la classe " input-group " au div qui encapsule l'entrée et le bouton/s. 

0
Nadia Hristova

Lorsque vous essayez d’obtenir des dimensions parfaites en pixels de manière inter-navigateur, la première chose à faire est d’envisager la mise en œuvre d’une réinitialisation CSS. Je préfère Boilerplate HTML5 , mais vous pouvez en trouver d’autres dans Google.

La réinitialisation CSS est vraiment fondamentale pour normaliser les différences entre les navigateurs (en particulier lorsqu'il s'agit de formulaires).

0
Moses

Pour IE: Vous pouvez styler les choses différemment en utilisant des feuilles de style conditionnelles:

<!--[if lt IE 7]> <html class="ie6" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="ie7e" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="ie8" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->

Donc, vous écririez:

.ie6 .my-button-class {
  //
}
0
madflow

J'essaie de résoudre ce problème pendant des jours et chaque solution n'est pas complète et ne fonctionne pas dans différents navigateurs.

Je trouve que ce code fait le travail:

float: left;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
height: 33px;

J'ai mis à jour Fiddle - https://jsfiddle.net/p9maozk2/

0
Dampas