Comment faire les divs en ligne?

Question

J'utilise un emballage mais je suis assez confus. Je veux que les deux resultboxdiv s soient en ligne avec le submitdiv.

Jetez un oeil ici:

http://jsfiddle.net/QtVwr/

Qu'est-ce que je fais mal?

Je ne suis pas très familier avec CSS.

Answer 1

Une partie du problème est qu'il y a des problèmes avec votre code HTML. Voici un début:

1. assurez-vous que tous les div sont fermés.
2. enlever les float s de votre css
3. ajouter display:inline-block;
4. supprimer les styles en ligne à partir de votre HTML.
5. corriger la classe .wrapper être .wrapper1 (correspondant au HTML)

Alors, ce qui est plus ce que vous voulez, je suppose:

.wrapper1 { 
    height:70px; 
    width: 800px; 
    background: #ffffff; 
    border: 1px solid grey; 
    color: #BDBDBD; 
} 

.resultbox { 
    width: 300px; 
    background: #ffffff; 
    color: #BDBDBD; 
    display: inline-block; 
} 

.submit { 
    height:15px; 
    width: 32px; 
    margin-top:10px; 
    background: #ffffff; 
    border: 1px solid; 
    color: #BDBDBD; 
    display: inline-block; 

} 

et le code HTML

<div class="wrapper1"> 
    <div class="resultbox" style="" > 
     <div class="locationresult" style="" form action="weezyresults.php" method="post"> 
      <input type="text" name="search" size="36" value="" style="" /> 
     </div>  
    </div> 

    <div class="resultbox" style="" > 
     <div class="locationresult" style="" form action="weezyresults.php" method="post"> 
      <input type="text" name="search" size="36" value="" style="" /> 
     </div>  
    </div> 

    <div class="resultbox" style="width:35px;" > 
     <div class="submit"></div> 
    </div>  

</div> 

Exemple:http://jsfiddle.net/QtVwr/2/

Vous aurez toujours besoin de jouer avec. Mais c'est un début.

Answer 2

Pour div en ligne, vous devez utiliser le style CSS suivant:

.mydiv{ display: inline; } 

Note: Modifier la largeur de votre emballage (en faire plus petit) et vous verrez les résultats

Answer 3

La largeur de vos résultats les boîtes combinées dépassent la largeur de votre emballage. Vous devez soit élargir le wrapper, soit réduire la largeur des résultats.

Answer 4

Pourquoi avez-vous la div de soumission dans un div de resultsbox? Pourquoi la marge gauche: 10px, seulement avec le premier div?

Je ferais comme ça:

<div id="wrapper"> 
<div class="resultbox"></div> 
<div class="resultbox"></div> 
<div id="submit"></div> 
</div> 

et de définir la largeur et la hauteur de l'emballage, et laissez l'autre flotteur divs. C'est juste un longhot, pas exactement sûr de ce que vous essayez d'accomplir. Je pense juste que votre nidification ne va pas bien.

Answer 5

Le code que vous avez fourni présente plusieurs problèmes.

• vous avez défini des règles de CSS pour une enveloppe de classe mais wrapper1 de classe dans votre emballage de classe html
• n'a pas assez de largeur pour les deux boîtes de résultat ainsi que le soumettre
• Il y a des citations supplémentaires sur la deuxième case résultat style="margin-left: 5px; margin-top: 3px;""
• balises de formulaire sont malformés et étant étroitement liés à vos balises div
• balises de formulaire ne sont pas fermées
• locationresult balise div est pas fermée
• flotteurs doivent être dédouanés

ici est un violon

http://jsfiddle.net/e3dg6/