Elemento flotante a nivel de bloque:¿Es necesario establecer el ancho? En caso afirmativo, ¿cómo?

Question

Digamos que tengo cuadros de texto, listas desplegables y botones de envío.Todos son elementos en línea.Lo que significa que las propiedades "oficialmente" de margen, relleno, ancho y alto deben ignorarse (en la práctica, no).Si tuviera que seguir el camino correcto para establecer la altura de un botón, escribiría algo como display:block y luego definiría la altura.Pero hay consideraciones de que un elemento a nivel de bloque se expandiría inesperadamente, por lo que será mejor que establezca su ancho en algún valor fijo.El problema es que no sé su ancho ya que se puede definir dinámicamente en el texto del botón.

Otro escenario:Deseo crear un menú a través de <ul> y <li>.Quiero tenerlo alineado horizontalmente, con algunos elementos agrupados a la izquierda y algunos estirados hacia la derecha.Ambos <ul> y <li> son elementos a nivel de bloque.Como deseo que mi menú ocupe todo el espacio horizontal disponible, luego jugar con la altura de los elementos y empujar los elementos del menú hacia ambos lados, el modo de bloqueo está bien para mí.Solo usaré float:left y float:right para realizar la tarea.Pero nuevamente, el uso debería establecer un ancho para los elementos del menú, ya que son elementos de bloque.Desconozco sus anchos porque el texto de los artículos puede variar.Pero parece que todo está bien tal como está.

No he notado ningún problema con los elementos en línea obligados a representarse como elementos de bloque sin flotar ni establecer el ancho, ni con el ejemplo del elemento de lista.Funciona bien en IE7, FF3, Opera 9 y Safari cualquiera que sea la versión actual.La pregunta sigue siendo:¿Debería preocuparme por estos elementos en línea a bloque o por elementos de bloque reales flotantes pero sin el ancho establecido o simplemente dejar todo como está?¿Me estoy perdiendo algo o es sólo una más de esas cosas que simplemente no deberías esperar hacer bien?

Answer 1

  

Digamos que tengo cuadros de texto, listas desplegables   y enviar botones. Ellos son todos   elementos en línea. Lo que significa que   " oficialmente " margen, relleno, ancho   y las propiedades de altura deben ser   ignorado (en la práctica no realmente). Si yo   iban por el camino correcto para establecer el   altura a un botón que escribiría   algo como mostrar: bloquear y luego   Definir la altura. Pero hay   consideraciones que un nivel de bloque   el elemento se expandiría   inesperadamente, así que mejor configuro su   ancho a algún valor fijo. El problema   es que no sé su ancho desde   se puede definir dinámicamente sobre el   texto del botón.

A menos que se refiera a peculiaridades del modelo de caja de Internet Explorer , no debe preocuparse por nada que se expanda o contraiga inesperadamente. Siempre que se encargue de normalización para la variación del navegador , estarás bien. Si tiene un efecto secundario inesperado y no deseado en el camino hacia el diseño de la gloria, lo depura, ya que es un error del programador con el que se enfrenta. CSS puede ser peculiar, pero esa no es una excusa apropiada el 95% del tiempo para la mayoría de los principales navegadores. El otro 5% no hablamos.

Así es como entiendo tu problema:

Desea un menú de <li> flotante para que tenga un menú horizontal que abarque el ancho de la ventana gráfica (lo que su usuario ve 'en la ventana del navegador') para ser consistentemente el ancho completo de la ventana gráfica.

Parece que está pensando en términos de un diseño de ancho fijo, cuando realmente lo que suena adecuado para sus propósitos es un diseño de ancho fluido. Esto significa que crea un diseño que es 'elástico' y se expande y contrae en relación con el tamaño de la ventana del navegador del usuario. Si creó su diseño anticipando los anchos de píxeles que se establecen en cada elemento, probablemente pueda encontrar una manera elegante de mantener un encabezado y navegación de ancho fluido, pero tener un área de contenido principal de ancho fijo. Puede encontrar un medio feliz sin un rediseño completo. Este tutorial probablemente sea lo que usted estás buscando. Un buen la explicación de los términos ancho fijo y ancho fluido se puede encontrar aquí si no está familiarizado con la jerga y desea ver más de cerca estas ideas.

Uno más para el camino:

No solo se recomienda establecer un ancho en todos los elementos flotantes , pero forma parte del estándar CSS2 según W3C.

• Angelina

Answer 2

Creo que estás un poco más estresado :)

Echa un vistazo a estos enlaces , especialmente 9.4, 9.5 y 10.3. Y ctrl-f & Quot; inline-block & Quot;

Answer 3

Si tomamos el " Official " línea que mencionas, entonces la vida es fácil ya que no tenemos que preocuparnos por los anchos, alturas y para estos elementos.

No piense en píxeles perfectos, no se preocupe por las minucias de presentación, siga los estándares, permita que el navegador & amp; sus usuarios para definir estilos ...

(si solo fuera realmente tan directo en el " no oficial " mundo real)

Answer 4

Ok, supongo que mi pregunta no se entendió correctamente. ¿Qué sucederá si no configuro el ancho para las cajas flotantes? No puedo configurarlo, no lo sé. porque depende del contenido ¿Se reducirán todos los cuadros a su ancho de contenido? Así es como funciona en la práctica. Y estoy satisfecho con eso. ¿Hay alguna confirmación oficial de que este comportamiento debería esperarse?

Agregado: Aquí tengo algo interesante: http://www.webmasterworld.com/css/3811603.htm

Sugiero verificar las recomendaciones para una explicación más técnica de las diferencias, pero simplemente, el comportamiento de los flotadores cambió entre css2 (1998) y css2.1 (un par de meses de 2005 y luego de 2007). Por css2 era obligatorio establecer un ancho en los flotadores, mientras que & Quot; shrink-wrapping & Quot; ves en ff3 es css2.1. Eso significa que los navegadores anteriores a julio / 2007 se ajustan a la recomendación relevante para su tiempo de fabricación cuando extienden el contenedor div # en todo el ancho de la ventana. (Lo que no explica Opera, pero siempre ha hecho lo suyo).

Si es así, entonces estoy contento. Como mencioné, funciona en IE7, FF3, Opera 9 y Safari actuales.

¿Algún comentario más?

Answer 5

(suponiendo que si entiendo tu problema)

En la mayoría de los casos, no necesita establecer el ancho en los elementos de la lista. Pero (sí, hay un pero aquí) si tienes un enlace con display: block (digamos que quieres usar una puerta corredera) tienes que hacer un pequeño truco:

el html:

<ul class="menu">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>

Y CSS:

.menu li {
    float:left
}
    .menu li a {
        display:block;
    }
    /* ===================== */
    /* = and the IE6 trick = */
    /* ===================== */ 
    * html .menu li a {
        width:1%;
        white-space:nowrap;
    }

Si no haces esto, entonces el ENLACE se extenderá a todos los padres. El LINK no es el elemento LIST;) De esta manera, establece un & Quot; min-width & Quot; a IE6 y no tendrás ningún otro problema.