Quiero tanto las etiquetas y un cuadro de texto aparecen en la misma línea («Búsqueda de productos:» la etiqueta está por encima de «búsqueda» de la etiqueta, quiero que ellos estén en la misma línea), la diferencia es leve, pero existe, yo quiero que sean precisos.

versión en línea: enlace

Marcado:

<!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;
 }
InformationsquelleAutor markiz | 2009-10-23

3 Comentarios

  1. 2

    Envolver todo el texto en divs para que usted pueda añadir superior acolchado para que todos se alinean en la misma línea también. Especificar siempre anchos cuando flotante. Creo que es más fácil especificar flota como todos los de la izquierda y tener un ancho específico.

    Marcado

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

    Actualización sin la extra de divs para la etiqueta de centrado

    Marcado

    <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;
    }
    • No puedo tener tanto «Búsqueda» etiqueta y un cuadro de texto dentro de un div?
    • Sí, se puede. Es sólo que no me gusta el defecto de alineación vertical entre las entradas y el texto que los exploradores dan. En el primer ejemplo, el texto parece un poco fuera de la vertical del centro de la entrada. Pero cuando los tienes en diferentes divs puede hacer que la línea de mejor.
    • Puede usted por favor agregue el código(el uno con el exceso de divs) a su respuesta ? y voy a aceptar su respuesta.
  2. 0

    Yo lo hice añadiendo un poco de relleno a la siguiente sección de la CSS:

    .displayModes
    {
        float:left;
        padding-left: 2px;
        padding-top: 2px;  
        text-align: center;
    }
    • Esto no ayuda. todavía no alineados.
  3. 0

    acaba de establecer la línea de altura de la div «displayModes» a 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;
     }

    Pequeña sugerencia: usted tiene un problema de desbordamiento, sólo tiene que añadir un «más claro» div para forzar el niño div a ser los contenidos de «panel»:

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

    REVISIÓN:
    La línea-altura, de la «displayModes» div, tiene que ser 21px! Probado en FF 3.5.3 y Safari 4.0.3

    • ¿puede por favor explicar qué quieres decir con «problema de desbordamiento»? los divs que parecía ser mostrada bien…
    • Por cierto, su solución no ayuda, elementos que todavía no están alineados.
    • En IE no sé, pero en FF y Safari funciona bien! El Div «panel» no tiene una altura fija, por lo que, al flotar tanto en el div «displayModes» y el div «searchPanel», que superen la zona de el div padre … así que, desbordan el div contenedor! Incluso si el navegador muestra todos muy bien, en realidad no son contenidos de la div «panel» … tratar de establecer un color de fondo para el div «panel» y verás a lo que me refería!

Dejar respuesta

Please enter your comment!
Please enter your name here