¿Por qué este CSS no funciona?

Estoy tratando de evitar que el div bar_top_container envuelva sus contenidos sin importar cuán amplia sea la página (es decir, ambas selecciones deben aparecer siempre en la misma línea), esto no funciona, pero cuando el ancho de página es demasiado pequeño para ellos ambos encajan en una línea, ¿cómo puedo solucionar esto?¿Por qué este CSS no funciona?

Estilos:

#bar_top_container { position: relative; white-space: nowrap; } 
#bar_top_block { float: left; padding-left: 10px; padding-right: 10px; border-right: 1px solid #4965BB; } 
#clear { clear: both; }

HTML:

<div id="bar_top_container"> 
<div id="bar_top_block"> 
    <span class="bold">select1: </span> 
    <select><option value="asdf">asdf</option></select> 
</div> 
<div id="bar_top_block"> 
    <span class="bold">asdf: </span> 
    <select><option value="blah">-- select action --</option></select> 
</div> 
<div id="clear"></div> 
</div>

Fuente

2010-06-30 user318747

Puede tener las propiedades block y inline para un elemento si lo visualiza como ... inline-block!

Aquí está el código corregido y trabajo:

span.bold son label s
un label se asocia a su elemento form a través de la for/id atributos
bar_top_block es un id usado dos veces. Debería ser un class
hay necesidad de float: left; como display: inline-block; se utiliza
lo tanto no hay necesidad de un elemento de compensación, ya sea
los .bar_top_block elementos también se muestran en línea de modo que cualquier espacios en blanco entre ellos es se muestra como espacio en blanco. Para evitar esto, agregué un comentario que evita cualquier espacio en blanco aunque dejo el código HTML legible.El texto dentro es 'sin espacios en blanco' lo que el desarrollador sabrá que este comentario está ahí por una razón y no debe ser despojado :)
puede quitar el width en body, es sólo aquí por el ejemplo
se puede jugar con la propiedad overflow en el envase
como Internet Explorer 7 y por debajo no entienden el valor inline-block en elementos de bloque como div, debe utilizar display: inline y dar al elemento del hasLayout con, por ejemplo, zoom: 1;
la mejor manera de dirigirse a IE7 y abajo y sólo aquellos navegadores es con un comentario condicional
he añadido soporte para Fx2 pero esto es simplemente por razones históricas :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 
    <title>Stack Overflow 3150509 - Felipe</title> 
    <style type="text/css"> 
body { 
    width: 300px; 
} 

#bar_top_container { 
    overflow: auto; 
    white-space: nowrap; 
    border: 1px solid red; 
} 

.bar_top_block { 
    display: -moz-inline-stack; /* Fx2, if you've to support this ooold browser. You should verify that you can still click in the elements, there is a known bug with Fx2 */ 
    display: inline-block; 
    padding-left: 10px; 
    padding-right: 10px; 
    border-right: 1px solid #4965BB; 
} 

    </style> 
    <!--[if lte IE 7]><style type="text/css"> 
.bar_top_block { 
    display: inline; 
    zoom: 1; 
} 
    </style> <![endif]--> 
</head> 
<body> 
    <form method="post" action="#" id="bar_top_container"> 
     <div class="bar_top_block"> 
      <label for="select1">Obviously I am a label: </label> 
      <select id="select1"><option value="asdf">asdf</option></select> 
     </div><!-- no whitespace 
     --><div class="bar_top_block"> 
      <label for="select2">I'm a label too and I need a for attribute: </label> 
      <select id="select2"><option value="blah">-- select action --</option></select> 
     </div> 
    </form> 
</body> 
</html>

Fuente

2010-06-30 17:38:58 FelipeAls

Para eliminar los espacios entre los elementos, puede usar 'font-size: 0;' en su elemento primario. Luego, donde sea que lo necesite, simplemente defina el tamaño correcto del texto, por ejemplo: '.parent {display: inline-block; tamaño de fuente: 0; } .parent * {font-size: 12px} '. Buena suerte. –

@SlavikMe No uso este método porque, para una mejor accesibilidad, trabajo con 'em' unit para tamaño de letra y' 0' lo romperá todo. Ver por ejemplo [C14: Usar unidades en em para tamaños de fuente] (http://www.w3.org/TR/WCAG20-TECHS/C14) Técnica WCAG 2.0 – FelipeAls

@FelipeAls: ¡Gracias amigo! Publicación muy útil. Realmente me salvó el día. – YashG99

elementos flotantes envuelven como white-space: nowrap no funciona para elementos de bloque, pero sólo para los elementos en línea y texto.

Fuente

2010-06-30 15:03:43 jantimon

¿hay alguna forma de evitarlo? – user318747

espera para HTML5;) - hay muchas soluciones de CSS HTML4. Busque el diseño de flotación. – jantimon

https://bugzilla.mozilla.org/show_bug.cgi?id=488725 – gavenkoa

-1

que sugiero utilizar un uso de forma válida:

<form> 
    <label>select1: <select><option value="asdf">asdf</option></select></label> 
    <label>asdf: <select><option value="blah">-- select action --</option></select></label> 
</form>

espero que ayude.

Fuente

2012-12-20 15:53:11

Respuesta

Cuestiones relacionadas