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

Je veux à la fois des étiquettes et de la zone de texte apparaît sur la même ligne de Recherche, pour les produits:" l'étiquette est au-dessus de "la recherche" de l'étiquette, je veux qu'ils soient sur la même ligne), la différence est faible mais elle existe, je tiens à être précis.

version en ligne: lien

Balisage:

<!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;
 }

OriginalL'auteur markiz | 2009-10-23

  1. 2

    Envelopper tout le texte dans les divs de sorte que vous pouvez ajouter des top rembourrage de sorte qu'ils s'alignent sur la même ligne. Toujours spécifier des largeurs quand flottante. Je trouve plus facile de spécifier des flotteurs que tout à gauche et ayant des largeurs spécifiques.

    Balisage

     <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 supplément de divs pour le label de centrage

    Balisage

    <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;
}
    Je ne peux pas à la fois "Recherche" de l'étiquette et de la zone de texte à l'intérieur d'un div?
    Oui, vous le pouvez. C'est juste que je n'aime pas le défaut d'alignement vertical entre les entrées de texte et les navigateurs de donner. Sur le premier exemple, le texte semble un peu faible hors de la verticale du centre de l'entrée. Mais quand vous les avez dans les séparer divs, vous pouvez les faire en ligne de mieux.
    Pouvez-vous s'il vous plaît ajouter le code(l'un avec d'autres divs) à votre réponse ? et je vais accepter votre réponse.

    OriginalL'auteur Ehz

  2. 0

    Je l'ai fait par l'ajout du rembourrage à la section suivante de la CSS:

    .displayModes
{
    float:left;
    padding-left: 2px;
    padding-top: 2px;  
    text-align: center;
}
    Ce n'aide pas. ils ont toujours pas alignée.

    OriginalL'auteur Buggabill

  3. 0

    il suffit de définir la ligne de hauteur de la div "displayModes" de 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;
 }

    Petite suggestion: vous avez un problème de dépassement de capacité, il suffit d'ajouter un "plus clair" div pour forcer l'enfant div être contenu dans "panneau de configuration":

    <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; }

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

    pouvez-vous nous expliquer ce que tu veux dire "problème de dépassement de capacité"? les divs qui semblait être affiché bien...
    Btw, ta solution ne vous aide pas, les éléments toujours pas alignée.
    Sur IE je ne sais pas, mais dans FF et Safari, il fonctionne très bien! La Div "panneau de configuration" n'a pas une hauteur fixe, de sorte que, lorsque vous flotter à la fois la div "displayModes" et le " div "searchPanel", ils dépassent le domaine de la div père ... donc, ils dépassement de la div conteneur! Même si le navigateur affiche tous beaux, ils ne sont pas réellement contenu dans le div "panneau de configuration" ... essayer de mettre une couleur de fond à la div "panneau de configuration" et vous verrez ce que je voulais dire!

    OriginalL'auteur BitDrink