CSS - exactement la même hauteur et l'alignement du bouton et de la zone de texte d'entrée

J'ai besoin d'avoir un bouton et un tex boîte de assis les uns à côté des autres et qu'ils ont pour aligner parfaitement que si l'un est plus grand que les autres, puis il sera immédiatement perceptible.

Habituellement je ne reviendrai pas à vous soucier de petites différences entre les navigateurs, mais ces deux entrées sont assis dans une position très en vue sur chaque page et sont une fonctionnalité du site, de sorte qu'ils ont à aligner parfaitement dans tous les principaux navigateurs et les niveaux de zoom.

Quelqu'un aurait-il des conseils sur la façon d'atteindre cet objectif.

Comme un exemple rapide de ce que je suis en train de réaliser: la nouvelle page d'accueil google. Après avoir commencé à taper la saisie semi-automatique des coups de pied dans la zone de recherche est déplacé vers le haut avec un bouton bleu parfaitement alignée sur la zone de texte. Il fonctionne parfaitement croix-navigateur, mais sa marque dans un tableau. Ne qui suggèrent que cela peut être la meilleure façon d'atteindre cet objectif?

Quelle marque utilisez-vous?
Hi - ont essayé beaucoup de choses différentes, j'essaie de garder tout supplémentaire une annotation à un minium donc, idéalement, il s'agirait d'une forme avec une étiquette, une zone de saisie et un bouton de type submit.
Vous pouvez aussi essayer de demander à ce sur le nouveau Expérience Utilisateur bêta sur le site.
oui: mais mark-up vous utilisez déjà? Que sommes-nous travailler avec, de voir ce que vous avez déjà nous permet de fournir des réponses de meilleure qualité et afin de mieux vous aider.
Si vous fournissez un jsFiddle démo avec des exemples de code, et de l'état exactement où les navigateurs/versions vous avez besoin de la hauteur et l'alignement de cohérence, je vais lui donner un aller.
Si la question est de Firefox, cette réponse résolu pour moi: stackoverflow.com/a/12734594/970551

InformationsquelleAutor David | 2011-07-17

Je te suggère d'essayer de le style de l'élément parent de l' input/button appariement (un fieldset, dans mon exemple) afin de donner un commun font-size, et font-family, puis à l'aide em mesures pour le style dimensions/padding/marges pour les éléments enfants. Idéalement style de tous les éléments d'enfant avec la même feuille de style CSS.

Le suivant mark-up:

<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 vous suggère quelque chose de similaire, mais adaptées à votre design particulier, pour le code CSS suivant:

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;
}

JS Fiddle démo.

À la suite de la clarification que c'est pour répliquer/reproduire le style de Google jouxtant l'entrée texte/bouton envoyer:

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;
}

JS Fiddle démo.

Bien que le ci-dessus fonctionne très bien dans Chrome 12.x et de l'Opéra De 11,5 (Ubuntu 11.04), Firefox semble montrer un pixel supplémentaire ou deux dans la dernière démonstration.

merci beaucoup pour votre temps sur ce sujet, mais vous rencontrez exactement les mêmes problèmes que moi. Il n'a simplement qu'à être parfait dans tous les principaux navigateurs compte tenu de l'importance de la forme des éléments. Im assez développeur expérimenté donc je sais combien il est difficile d'obtenir des éléments de formulaire, de se comporter et peut le faire dans une certaine mesure, c'est juste qu'ils ont besoin d'être à 100% parfaitement aligné à tout moment.
cela devrait vraiment être la accepté de répondre à cette question....
Wow, c'est que le plus simple possible CSS solution au problème "un bouton et un tex boîte de assis les uns à côté des autres et qu'ils ont pour aligner parfaitement".

InformationsquelleAutor David Thomas

7

J'ai été en tirant sur mes cheveux pendant des heures à essayer d'atteindre cet objectif. Après beaucoup de recherche et d'expérimentation, voici la recette pour la résolution de l'OP du problème (au moins des versions contemporaines de l') Chrome, Firefox, IE, Opera et Safari:
1. Utiliser le même CSS concernant le modèle de boîte pour tous les types de nœuds, vous devez aligner (bouton, input, select);
2. NE spécifier la frontière explicitement (ou au moins, largeur);
3. NE PAS spécifier la hauteur explicitement.
Oui, c'est tout là est à lui. Voici le plus minimaliste CSS qui produit les résultats escomptés:
```
select, input, button {
    border-width: 0px;
}
```
Si vous avez besoin de plus de style, n'hésitez pas à ajouter de la couleur, le remplissage et les marges -- tout va bien fonctionner. Mais, quoi que vous fassiez, ne PAS spécifier la hauteur explicitement. C'est la seule pierre d'achoppement, car chaque navigateur calcule la hauteur différemment; certains vont laisser un pixel supplémentaire ou deux au-dessus de la sélectionner et de ne pas le bouton, certains vont quitter au-dessus du bouton et de ne pas le sélectionner, et certains fonctionnent comme prévu.

Pour l'enregistrement, Chrome semble être la plus cohérente dans ce domaine (qui est, si vous ne spécifiez la hauteur), mais là encore, qui s'en soucie.
- Cela n'a pas fonctionné pour moi...
- Merci pour les commentaires, mais si vous allez donner de l'information, veuillez expliquer en quelques mots ce qu'est exactement est pas de travail (type d'élément sur ce navigateur).
- Grand conseil. Pour obtenir exactement la même hauteur sur les différents navigateurs/plates-formes nécessaires pour spécifier la hauteur pour les entrées et sélectionne (en em bien entendu), mais pas pour les boutons et les liens (un des éléments).
- Puis-je spécifier rembourrage? em est?
InformationsquelleAutor Bogdan Stăncescu
4

Je pense que c'est très pare-balles:

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

Sur les deux éléments suffit d'utiliser:
```
display: inline-block;
padding: 10px 15px;
font-size: 20px;
border-radius: 0;
-webkit-appearance: none;
border: 1px solid transparent;
```
Et utiliser "normaliser.css" - c'est tout. Semble bon sur l'iPhone:

InformationsquelleAutor Henning Fischer

J'ai vérifié de nombreuses sources dans le WEB comment faire la meilleure, la croix-navigateur, de thème indépendant. J'espère avoir une solution, peu, ça n'est pas à 100% (il doit être découpés en vertical CSS padding). Mon problème a été d'avoir l'étiquette et le texte d'entrée avec la même largeur et compact.

Résultat désiré:
CSS - exactement la même hauteur et l'alignement du bouton et de la zone de texte d'entrée
La solution que j'ai trouvé par plusieurs expériences est décrite par 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ée par JSFIDDLE: css-exact-same-height-and-alignment-of.html

InformationsquelleAutor Vaclav Svara

1

Je suis en train d'essayer de résoudre ce pendant des jours et chaque solution n'est pas tout, et pas de travail dans les différents navigateurs.

Je trouve que ce code faire le travail:
```
float: left;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
height: 33px;
```
J'ai mis à jour le Violon https://jsfiddle.net/p9maozk2/

InformationsquelleAutor Dampas
0

En essayant d'atteindre l'pixel perfect dimensions dans une manière de croix-navigateur, la première chose que vous devez faire est de considérer la mise en œuvre d'un CSS reset. Je préfère HTML5 Boilerplate, mais il en existe d'autres que vous pouvez trouver à partir d'une recherche sur google.

Le CSS reset est vraiment fondamental dans la normalisation de la croix-navigateur différences (surtout lorsqu'il s'agit de formes).
- SALUT @Moïse grâce. Je suis currenty à l'aide de l'yui réinitialiser
- Votre un bon début alors. La prochaine étape logique serait soit de la mise en œuvre de @madflow de la recommandation de l'utilisation d'IE conditionnel de classes, ou de servir alterner les feuilles de style pour IE (encore une fois à l'aide conditionnelle classes). Toutefois, si vous voulez quelque chose de plus de conseils ou de l'aide, vous aurez besoin de mettre à jour votre question avec le code et laissez-nous savoir quels sont les problèmes que vous rencontrez avec certains navigateurs.
InformationsquelleAutor Moses

Pour IE: Vous pouvez définir le style les choses différemment à l'aide de feuilles de style conditionnel:

<!--[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, on peut écrire:

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

InformationsquelleAutor madflow

0

Votre autre option est d'utiliser Bootstrap. - Je résoudre ce problème par l'attribution de la classe "entrée-groupe" à la div qui encapsule l'entrée et le bouton/s.

InformationsquelleAutor Nadia Hristova
0

En 2019, vous voulez être à l'aide de Grille CSS pour vos formes, même si elles n'ont qu'une entrée et un bouton.

Cela permet d'économiser beaucoup de douleur.

J'ai beaucoup mon travail si je ne vais pas poster un exemple ici. Au lieu de cela, voici les choses que vous devez savoir.

Le récipient externe peut être la form, CSS et ce pour display: grid; grid-template-rows: 2em; grid-template-columns: 1fr auto;

L'entrée doit avoir une étiquette qui je suppose est configuré pour être caché. Donc le CSS pour l'entrée a grid-column: 1; height: 100%; le bouton a grid-column: 2; height: 100%

Vous allez faire votre propre avec des marges, les décors, les rembourrages, les frontières, les frontières rayon et telles.

L'essentiel d'obtenir le bouton à la ligne avec l'entrée se fait avec la ligne de grille ayant une hauteur fixe en ems ou à un autre sensible sensible d'une unité amie et l'entrée et le bouton d'une hauteur de 100%.

Je n'ai trouvé aucune des réponses ci-dessus entraînera concis et maniable code de la Grille CSS option qui fonctionne pour moi sur Firefox, Chrome et un navigateur basé sur Webkit.

Remarque que si l'utilisation de Grille CSS, alors vous devez précisément zéro div éléments dans votre formulaire, cependant, si vous utilisez des balises html fieldsets vous devrez peut-être configurer pour display: content comme Grille CSS ne fonctionne pas avec fieldset.

InformationsquelleAutor Henry's Cat
0

Quelqu'un qui est en train de le faire maintenant, j'ai trouvé que cette solution semble fonctionner. Essayez d'ajouter :
```
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
```
à votre css sur les deux éléments qui seront toujours les laisser légèrement décalés, et puis jouer avec le haut de rembourrage dans le mal alignées élément. J'ai constaté que :
```
padding-top: 2px;
```
a fonctionné pour moi.

InformationsquelleAutor Odoug4
-1

Utiliser un arrière-plan div avec une image pour l'entrée. C'est beaucoup plus facile de garder une cohérence. Aussi, le positionnement absolu est bonne pour ce type de situation.

edit: j'ai écrit cette réponse il y a 5 ans, il y a de meilleures façons maintenant.

InformationsquelleAutor Ilia Choly

-1

CSS:

.sdiv {
padding-top: 33px;
padding-left: 33px;
height: 123px;
border: 1px dotted red;
border-radius: 7px;
background-color: Black;
}

.sbtn {
float:left;
height:24px;
width: 24px;
padding: 3px 0 0 0;
border:none;
margin-top: 14px;
background-color: white;
}

.stxt {
width: 180px;
height:22px;
float:left;
border:none;
padding-left:3px;
margin-top: 14px;
}

HTML:

<div class="sdiv">
<form action="/">

<input class="stxt" type="text" placeholder="Search..." value="">

<button class="sbtn" type="submit">
<svg xmlns="http://www.w3.org/2000/svg" role="icon" viewBox="0 0 18 18" width="18" height="18">
<path fill-rule="evenodd" d="M 12.864 11.32 h -0.813 l -0.288 -0.277 A 6.66 6.66 0 0 0 13.38 6.69 a 6.69 6.69 0 1 0 -6.69 6.69 a 6.66 6.66 0 0 0 4.354 -1.617 l 0.278 0.288 v 0.813 L 16.467 18 L 18 16.467 l -5.136 -5.146 Z m -6.174 0 a 4.625 4.625 0 0 1 -4.632 -4.63 A 4.625 4.625 0 0 1 6.69 2.058 a 4.625 4.625 0 0 1 4.63 4.632 a 4.625 4.625 0 0 1 -4.63 4.63 Z" />
</svg>
</button>

</form>
</div>

Tous d'excellentes réponses! Mais aucun n'était vraiment ce que je cherchais...

J'ai eu plus de satisfaction de plus simple approche:

InformationsquelleAutor Rusty Nail

Vous devez vous connecter pour publier un commentaire.