Le bouton html est affiché en dessous de la zone de saisie

Question

J'ai une zone de saisie dans laquelle les utilisateurs peuvent entrer des termes de recherche. J'ai un bouton de saisie à côté du champ de recherche. pour une raison quelconque, le bouton est rendu sous la boîte de recherche.

Je veux que le bouton soit juste à côté du champ de saisie.

Mon html:

<div id="searchbox"> 
       <form method="post" action="/search/test"> 
       <div class="searchinput"> 
        <input type="text" id="searchbox" value="" /></div> 
       <div class="searchbutton"> 
        <input type="submit" id="searchboxbutton" value="Go" /></div> 
       </form> 
      </div> 

CSS:

#header #searchbox 
{ 
    float:left; 
    width:400px; 
    padding:5px 0px 0px 0px; 
} 
#header #searchbox #searchinput 
{ 
    display:inline; 
    float:left; 
} 
#header #searchbox #searchbox 
{ 
    display:inline; 
    float:left; 
} 
#header #searchbox #searchbutton 
{ 
    display:inline; 
    float:left; 
} 

Answer 1

Probablement parce que la largeur de votre #searchbox est 400px et votre balise d'entrée et l'étiquette de bouton est plus de 400 px. Essayez de définir la largeur de la #searchbox sur 600px et voyez ce qui se passe.

Changer votre code CSS de

#header #searchbox 
{ 
    float:left; 
    width:400px; 
    padding:5px 0px 0px 0px; 
} 
#header #searchbox #searchinput 
{ 
    display:inline; 
    float:left; 
} 
#header #searchbox #searchbox 
{ 
    display:inline; 
    float:left; 
} 
#header #searchbox #searchbutton 
{ 
    display:inline; 
    float:left; 

}

à

#header 
{ 
    float:left; 
    width:400px; 
    padding:5px 0px 0px 0px; 
} 
#searchinput, #searchbox, #searchbutton, #searchboxbutton 
{ 
    display:inline; 
    float:left; 
} 

Answer 2

Vous avez un sélecteur à base d'identifiant en CSS (#searchinput) mais vous utilisez des classes dans le balisage (<div class="searchinput">). Changez l'un ou l'autre et ça devrait marcher. En troisième lieu, vous n'avez pas besoin de display:inline. Juste float: left fera l'affaire. De plus, les éléments flottants doivent avoir une largeur. Alors définissez une largeur.

Answer 3

Votre <input type="text" id="searchbox" value="" /> est de style pour cette (largeur: 400px) ainsi:

#header #searchbox 
{ 
    float:left; 
    width:400px; 
    padding:5px 0px 0px 0px; 
} 

ID doivent être uniques - le modifier ou l'élément contenant et écrire vos styles en conséquence.

http://validator.w3.org/docs/errors.html

141: ID X déjà défini

An "id" is a unique identifier. Each time this attribute is used in a 

document, il doit avoir une valeur différente . Si vous utilisez cet attribut comme un crochet pour les feuilles de style, il peut être plus approprié d'utiliser des classes ( éléments de groupe) que id (qui sont utilisé pour identifier exactement un élément).

Answer 4

Simplifier, simplifier, simplifier.

HTML

<form method="post" action="/search/test"> 
     <input type="text" id="searchbox" value="" /> 
     <input type="submit" id="searchboxbutton" value="Go" /> 
    </form> 

CSS

input {display: inline}