Faire un bouton et une zone de texte de la même hauteur uns à côté des autres
Je suis en train de remplacer la valeur par défaut de forme de style pour les deux éléments de forme, de sorte que la zone de texte et le bouton sont à la même hauteur et sont côte à côte de sorte qu'on dirait qu'ils sont un élément.
Dans certains navigateurs, il semble bien, mais dans certains cas, ils sont un pixel ou deux verticalement.
Voici un jsfiddle démo. Opera et Firefox OS X donnez-moi des questions.
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
input[type="text"] {
background-color: #fafafa;
padding: 7px;
font-family: helvetica, arial, sans-serif;
font-size: 1.2em;
margin-bottom: 20px;
display: block;
border: solid 2px #bbb;
color: #6f6f6f;
}
input[type="submit"] {
background-color: #fafafa;
font-family: helvetica, arial, sans-serif;
font-size: 1.0em;
font-weight:bold;
padding: 7px;
color: #6f6f6f;
}
input[type="submit"]:hover {
background-color: #ff379f;
color: #fafafa;
}
#subscription-email-text-field {
display:inline-block;
font-size:0.9em;
font-weight:400;
border:0;
width:250px;
height:32px;
margin:0;
}
#subscribe-button {
display:inline-block;
border-width:0px 0px 0px 1px;
margin:0;
height:32px;
}
<div style="background-color:black; padding:20px;">
<form>
<input type="text" id="subscription-email-text-field" name="email" placeholder="Enter Email for Newsletter"><!--
--><input type="submit" id="subscribe-button" value="subscribe">
</form>
</div>
OriginalL'auteur Dex | 2013-10-05
Vous devez vous connecter pour publier un commentaire.
Une solution simple est de modifier la règle CSS suivante:
Ajoutant
vertical-align: top
prend soin de la base de référence de l'alignement.Voir la demo sur: http://jsfiddle.net/audetwebdesign/EmAnr/
Note de bas de page:
Ajouter la bordure gauche sur le bouton de l'élément, n'oubliez pas d'ajouter la frontière de style,
ce qui peut être fait comme suit:
Concernant la frontière, simple surveillance, il suffit d'ajouter le style de bordure, ce qui peut être fait dans un couple des manières. Veuillez voir la mise à jour de violon.
Merci, ça fonctionne parfaitement
OriginalL'auteur Marc Audet
Tout ce que j'ai fait est une augmentation de la hauteur de la soumission de la boîte:
http://jsfiddle.net/QS3ec/9/
C'est vraiment dur. Je l'ai Testé dans Safari, Firefox, Opera et Chrome sur la Montagne du Lion et c'est peut-être pas la bonne solution.
Je crois que le problème est que les entrées sont le remplacement des éléments qui ont été rendus par le navigateur à l'aide de non-CSS mécanismes de style peut ne pas s'appliquer comme vous le souhaitez. J'ai eu une question similaire dans le passé que de jeter un peu de lumière sur ce genre de chose. Il semble toujours y avoir un comportement étrange lors de la tentative de style ancien composants de l'INTERFACE utilisateur, boutons, entrées, etc.
Tableau d'affichage de la Cellule de l'incohérence.
Essayez d'utiliser <button type="submit"></button> au lieu d'une balise d'ancrage de sorte qu'il fonctionne toujours sans js.
OriginalL'auteur Jeffpowrs
Problème, c'est la marge que vous avez donné à la zone de texte. Sur certains
les navigateurs rembourrage a seulement horizontale effet sur input type = button ou soumettre.
//fix
ajouter "box-sizing: content-box" règle de l'input[type='submit'] { } fermeture.
Cela va faire sur certains navigateurs que seuls quelques-uns ont mis en œuvre.
Comme une solution de contournement régler la hauteur du bouton soumettre pour
afin de rendre des comptes pour les remplissage vertical.
C'est la meilleure façon d'atteindre votre objectif (cross-browser).
par exemple: la hauteur de votre zone de texte = 32px. donc, la hauteur du bouton = 32 + 2 * 7 = 46px
En fait c'est de travailler avec moi sur webkit(chrome et safari), firefox, et ie10.
Je veux dire, votre violon est de travailler pour moi.
Si vous êtes sacrément sûr que cela ne fonctionne pas essayer d'autres méthodes, comme ne pas à l'aide du bouton. la position et le style d'un span ou div, de sorte qu'il ressemble à un bouton et en fonction de vos besoins et de capturer l'événement click de l'élément et soumettre le formulaire (juste 3 lignes de javascript) et vous avez terminé. 🙂
Oui c'est ce qui est le plus adapté je pense
OriginalL'auteur Arun Aravind