Align <input> & <button> balises

J'ai une liste ordonnée qui a un <input type="text"... et <button> champ. Quand j'ai rendu, je les reçois les champs en 2 lignes distinctes. Comment puis-je obtenir pour venir dans la même ligne?

HTML-

<li>
    <input type="text" value="Paste URL here"></input>
    <button id="i">Go</button>
</li>

J'ai même retiré de <li> & mettez-les dans un autre <div>, sans succès. Ce CSS doit être ajouté ici pour surmonter ce comportement par défaut?

Mise à JOUR: j'ai maintenant supprimé ces 2 balises de la liste ordonnée & les mettre dans un <div>. Ça ressemble à ça maintenant -

<div style="display: inline-block">
    <input id="url" type="text" value="Paste URL here"></input>
    <button id="i" style="font-size:10px; margin:2px;">Go</button>
</div>

Pas d'effet à essayer float:left; ou display:inline-block.

quel navigateur? j'ai essayé sur Firefox & IE8, ils s'alignent sur la même ligne.
J'utilise Firefox 3.6.11

OriginalL'auteur Srikar Appalaraju | 2010-11-18

  1. 2
    <div style="width: 100%;">
    <input type="text" style="float: left; width: 200px;" id="url" value="Paste URL here">
    <button style="font-size: 10px; margin: 2px; float: left;" id="i">Go</button>
</div>

    OriginalL'auteur ArK

  2. 1

    Bouton soumettre semblent avoir différents de marge par défaut et les valeurs de remplissage dans les différents navigateurs.

    Je suppose que cela doit être dans certains de réinitialisation de la feuille de style que ce n'est pas le seul ennuyeux de la croix-navigateur "valeurs par défaut" à la contradiction. Quand est-ce que le web va normaliser c'est un autre sujet.

    C'est comment nous le faisons:

    #searchForm {
    position: relative;   //you must keep this
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
    margin-bottom: 30px;
}
input#searchEntry {
    padding: 0;    //you must keep this
    margin: 0;     //you must keep this
    margin-top: 3px;
    width: 198px;
    font: 17px Arial,Helvetica,sans-serif;
}
input#searchBtn{
    padding: 0;   //you must keep this
    margin: 0;    //you must keep this
    position: absolute;   //you must keep this
    left: 203px;
    top: 2px;
    height: 24px;
    width: 42px;
    font-size: 14px;
    background: url(http://yourDomain/img/yourPrettySearchIcon.png) buttonface no-repeat 9px 1px;
    cursor:pointer;
    cursor:hand;
}


<form id="searchForm" name="mySearchForm" action="myPage.html" method="post">
    <input name="searchEntry" value="" id="searchEntry" type="text"/>
    <input name="searchBtn" value="" id="searchBtn" type="submit"/>
</form>

    J'ai remarqué que de très petites différences entre IE8, Firefox et GChrome mais il peut y avoir dans d'autres navigateurs.

    Le formulaire ici a sa position "par rapport" de sorte que lorsque j'ai mis le bouton de position à l'absolu, la position du bouton lui-même relativement à la searchForm.

    OriginalL'auteur Adrien Be

  3. 0

    Il devrait être dans la même ligne.

    Veuillez vérifier la largeur de <li> and <li>'balise parent (<ul> ou quelque chose).
    Je pense que cela peut causer.

    Je n'ai pas mis toute la largeur de <li> ou <ul>. Aussi maintenant, j'ai déplacé ces éléments de <li>. Toujours pas de l'utiliser.
    vous pourriez avoir à le régler ensuite.
    Ensuite, vous pouvez essayer avec les style de tableau:<table> <tr width="100%"> <td width="80%"><input id="url" type="text" value="Coller l'URL ici"/></td> <td width="20%"><bouton id="i" style="font-size:10px; margin:2px;" value="Go"/></td> </tr> </table>
    Yoda: et une chose de plus que de supprimer le style de bouton.

    OriginalL'auteur Mohamed Saligh