Aligner des éléments sur la même ligne

Je souhaite que les libellés et la zone de texte apparaissent sur la même ligne (l'étiquette "Rechercher des produits:" est au-dessus de "Rechercher", je veux qu'ils soient sur la même ligne) existe, je veux qu'ils soient précis.Aligner des éléments sur la même ligne

version en ligne: link

Markup:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
    <html lang="en"> 
    <head> 
     <title>Test</title> 
    </head> 
    <body> 
     <div class="panel"> 
     <div class="displayModes"> 
      Search for products:   
     </div> 
     <div class="searchPanel"> 
     Search : 
     <input name="txtSearch" type="text" id="txtSearch" style="height:14px;" />   
     </div> 
    </div>  
</body> 
</html>

CSS:

.displayModes 
{ 
     float:left; 
    padding-left: 2px; 
    text-align: center; 
} 

.searchPanel 
{ 
    float: right; 
    margin-right: 150px; 
    text-align: center; 
} 
.panel 
{ 
font-family: Arial, Verdana, Sans-serif; 
font-size: 12px; 

    padding-top:10px; 
    width:600px; 
}

Source

2009-10-23 markiz

Enveloppez tout le texte dans les divs de sorte que vous puissiez ajouter le rembourrage supérieur pour qu'ils s'alignent bien sur la même ligne. Toujours spécifier les largeurs en flottant. Je trouve plus facile de spécifier des flottants comme tout gauche et ayant des largeurs spécifiques.

Markup

<div class="panel"> 
    <div class="displayModes"> 
     Search for products:   
    </div> 
    <div class="searchPanel"> 
     <div style="float:left;width:60px;padding-top:2px;"> 
      Search : 
     </div> 
     <div style="float:left;width:100px;"> 
      <input name="txtSearch" type="text" id="txtSearch" style="height:14px;" /> 
     </div>   
    </div> 
    </div>

CSS

.displayModes 
{ 
    float:left; 
    width:200px; 
    padding-top:2px; 
    padding-left: 2px; 
    text-align: center; 
} 

.searchPanel 
{ 
    float: left; 
    width:200px; 
    margin-right: 150px; 
    text-align: center; 
} 

.panel 
{ 
    font-family: Arial, Verdana, Sans-serif; 
    font-size: 12px; 
    padding-top:10px; 
    width:600px; 
}

Mise à jour sans divs supplémentaires pour l'étiquette de centrage

Markup

<div class="panel"> 
    <div class="displayModes"> 
     Search for products:   
    </div> 
    <div class="searchPanel">   
     Search :   
     <input name="txtSearch" type="text" id="txtSearch" style="height:14px;"/>     
    </div> 
</div>

CSS

.displayModes 
{ 
    float:left; 
    width:200px; 
    padding-top:4px; 
    padding-left: 2px; 
    text-align: center; 
} 

.searchPanel 
{ 
    float: left; 
    width:200px; 
    margin-right: 150px; 
    text-align: center; 
} 

.panel 
{ 
    font-family: Arial, Verdana, Sans-serif; 
    font-size: 12px; 
    padding-top:10px; 
    width:600px; 
}

Source

2009-10-23 15:33:38 Ehz

Est-ce que je ne peux pas avoir à la fois une étiquette "Recherche" et une zone de texte à l'intérieur d'une div? – markiz

Oui, vous pouvez. C'est juste que je n'aime pas l'alignement vertical par défaut entre les entrées et le texte que les navigateurs donnent. Sur le premier exemple, le texte apparaît un peu plus bas que le centre vertical de l'entrée. Mais quand vous les avez dans des divs séparés, vous pouvez les aligner mieux. – Ehz

Pouvez-vous s'il vous plaît ajouter le code (celui avec des divs supplémentaires) à votre réponse? et j'accepterai votre réponse. – markiz

Je l'ai fait en ajoutant un peu de rembourrage à la section suivante du CSS:

.displayModes 
{ 
    float:left; 
    padding-left: 2px; 
    padding-top: 2px; 
    text-align: center; 
}

Source

2009-10-23 15:27:55 Buggabill

Cela n'aide pas. ils ne sont toujours pas alignés. – markiz

vient de mettre la heigh ligne des div "displayModes" à 20px:

<div class="panel"> 
    <div class="displayModes"> 
     Search for products:   
     </div> 
     <div class="searchPanel"> 
     Search : 
     <input name="txtSearch" type="text" id="txtSearch" style="height:14px;" />   
     </div> 
</div>

CSS:

.displayModes{ 
    float:left; 
    padding-left: 2px; 
    text-align: center; 
    line-height: 20px; 
} 

.searchPanel{ 
    float: right; 
    margin-right: 150px; 
    text-align: center; 
} 

.panel{ 
    font-family: Arial, Verdana, Sans-serif; 
    font-size: 12px; 
    padding-top:10px; 
    width:500px; 
}

suggestion Petit: vous avez un problème de trop-plein, il suffit d'ajouter une div "plus claire" pour forcer la div de childs à être contenue de "panneau":

<div class="panel"> 
    <div class="displayModes"> 
     Search for products:   
     </div> 
     <div class="searchPanel"> 
     Search : 
     <input name="txtSearch" type="text" id="txtSearch" style="height:14px;" />   
     </div> 
     <div class="clearer"></div> 
</div>

CSS:

.clearer{ clear: both; }

FIX: La hauteur de ligne, de la div "de displayModes", doit être 21px! Testé sur FF 3.5.3 et Safari 4.0.3

Source

2009-10-23 15:51:05 BitDrink

pouvez-vous s'il vous plaît expliquer ce que vous voulez dire "problème de débordement"? les divs semblaient être bien affichés ... – markiz

Btw, votre solution ne aide pas, les éléments ne sont toujours pas alignés. – markiz

Sur IE je ne sais pas, mais dans FF et Safari ça marche bien! Le "panel" Div n'a pas une hauteur fixe, donc, quand vous flottez à la fois le div "displayModes" et le div "searchPanel", ils dépassent la zone du père div ... donc, ils débordent le conteneur div! Même si le navigateur affiche tout bien, ils ne sont pas réellement contenus à partir du div "panel" ... essayez de définir une couleur de fond pour le div "panel" et vous verrez ce que je voulais dire! – BitDrink

Aligner des éléments sur la même ligne

Répondre

Questions connexes