Ajuster l'élément à côté d'un autre?

Question

J'essaie de positionner une petite flèche vers le bas à côté d'une zone de texte.

jsFiddle example

Comment puis-je faire la fitting snuggly contre l'entrée, de telle sorte que leurs hauts et des bas alignés?

Doit être un moyen de saisir l'information de position était JS/jQuery et puis ... quoi, dois-je absolue-positionner?

---

Edit: Got it pretty darn close comment je veux. Il est encore un peu en dehors de IE8 ... de toute façon je peux le pousser?

Answer 1

Ce n'est certainement pas quelque chose qui devrait nécessiter JavaScript. Ma première suggestion serait d'essayer d'utiliser un élément button ou input[type=button] au lieu d'un span, j'ai toujours eu plus de chance alignant des zones de texte avec de vrais boutons que de faux.

Voici ce que je vois quand je convertir les éléments aux boutons:

Il est pas une solution parfaite, mais avec quelques ajustements mineurs aux styles de boutons et TextBox vous devriez être en mesure de faire ça marche. Gardez à l'esprit que différents navigateurs utilisent différents styles par défaut pour le rendu des widgets de formulaires. Il peut donc être difficile de trouver une solution universelle, notez la différence dans la bordure de la zone de texte.

La différence est plus dramatique dans votre exemple original:

Vous voulez certainement d'appliquer un style personnalisé à la zone de texte afin d'obtenir des résultats cohérents et prévisibles.

Answer 2

.cb-arrow { 
    cursor: pointer; 
    background: -moz-linear-gradient(center top, 
     rgb(242, 242, 242) 0%, 
     rgb(221, 221, 221) 50%, 
     rgb(207, 207, 207) 100%) 
     repeat scroll 0% 0% transparent; 
    border: 1px solid #707070; 
    -moz-border-radius-topright: 3px; 
    -moz-border-radius-bottomright: 3px; 
    padding: 0 3px; 
    margin-left:-5px 
} 


.combobox { border:1px solid #BBB; padding:2px 2px 1px 2px; margin:0 } 

Ce n'est pas la solution la plus jolie mais elle fonctionnera.

// EDIT: VERSION DEUX

Scrap le javascript (pour l'instant). Ajouter un conteneur On dirait bien dans l'ensemble, cohérent dans FF et Chrome:

HTML:

<div id='container'> 
    <input type="text" class="combobox" /> 
    <button type='button' class='cb-arrow'>&#9660;</button> 
</div> 

CSS:

#container { height:20px;line-height:20px } 

.cb-arrow { 
    border: 1px solid #707070; 
    background:white; 
    margin:0; 
    padding:0; 
    margin-left:-5px; 
    vertical-align:middle; 
} 

.combobox { 
    border:1px solid gray; 
    border-right:0; 
    vertical-align:middle; 
    padding:1px 
} 

Answer 3

semble fonctionner dans IE et FF. Je n'ai pas de chrome.

<style> 
#container * 
{ 
    border: 1px solid black; 
    float:left; 
    margin:0; 
    padding:0; 
} 
#container .cb-arrow 
{ 
    height:22px; 
    line-height:22px; 
    width:20px; 
} 
#container .combobox 
{ 
    border-right:0px; 
    height:20px; 
    line-height:20px; 
} 
</style> 
<div id='container'> 
    <input type="text" class="combobox" /> 
    <button type='button' class='cb-arrow'>&#9660;</button> 
</div>