para pantalla paginas imagen examples etiquetas estilos ejemplos div autoajustable ajustar css frontend

pantalla - Evitar el ajuste de línea en diseños CSS



imagen autoajustable html (2)

Mi diseñador de CSS ha hecho un diseño donde hay dos hermanos ul dispuestos de izquierda a derecha. El diseño se realiza especificando el ancho de las etiquetas ul .

Él está usando Firefox en Windows donde todo se ve bien. Estoy usando Firefox en OS X, donde el contenido de una de las etiquetas li tiene demasiado texto, por lo que fluye a otra línea. El diseño se realizó con la intención de que el texto esté en una línea.

Hay un par de consideraciones para hacer:

  • Quiero que las etiquetas ul vayan de izquierda a derecha, no de arriba a abajo
  • Quiero que la solución sea compatible con i18n (traducir las cadenas no debe hacer que se dividan en dos líneas)

Si esto se define en píxeles, ¿por qué aparece diferente en OS X en comparación con Windows incluso en el mismo navegador?

¿Existe una solución CSS general que pueda evitar el ajuste de líneas o impedir que la página se vea diferente con respecto al ajuste de línea entre OS X y Windows? ¿O es esta una causa perdida?


Configuración white-space: nowrap en las ul evitará que el texto se ajuste, hasta que se encuentre un <br /> . Por lo que tengo entendido, las listas ya son horizontales, pero en aras de la integridad, puede hacerlo haciendo que los elementos li display: inline o display: inline-block . El white-space: nowrap no funcionará para elementos de lista float .

Referencias:


Es posible, esa configuración de width: auto; Por esos elementos, podría arreglarlo también.