Tengo un menú que contiene algunos elementos con estilos float: right y float: left . A veces, estos artículos son alrededor de 3 o 4 y, a veces, alrededor de 9 o 10.
El problema ocurre cuando el cliente aumenta la escala cromática. tanto como aumenta la escala del 90%, los elementos desaparecen uno por uno.
Puedo cambiar la escala a 90 en el inicio de sesión del cliente, pero es posible que la cambien de nuevo. Quiero manejarlo en CSS como cuando el cliente aumenta la escala, los elementos a la derecha y a la izquierda serán visibles en nuevas líneas (es decir, si el elemento número 1 va a desaparecer, simplemente muévalo a la siguiente línea) o simplemente no lo haga. hacerse grande en el cambio de escala.
Mi menú no tiene ningún código CSS específico, aquí es simple:
.TableHeaderAndFooter { border-bottom: 2px lightgray solid !important; border-top: 2px lightgray solid !important; background: #34495e none repeat scroll 0 0; height: 36px; padding: 6px; width: 100%; } .Tabletoolbox { border-radius: 4px; margin: 1px 10px 0; padding: 0 2px; } .fright { float: right; direction: rtl; text-align: right; } .fleft { float: left; direction: ltr; text-align: left; } .fleft-enpages { float: left; direction: ltr; text-align: left; padding: 10px; } .TableHeader { background: #34495e none repeat scroll 0 0; height: 32px; width: 100%; } <div class="TableHeaderAndFooter TableHeader"> <!-- Right Items --> <div class="Tabletoolbox fright">Item 1 Right</div> <div class="Tabletoolbox fright">Item 2 Right</div> <div class="Tabletoolbox fright">Item 3 Right</div> <!-- Left Items --> <div class="Tabletoolbox fleft">Item 1 Left</div> <div class="Tabletoolbox fleft">Item 1 Left</div> <div class="Tabletoolbox fleft">Item 1 Left</div> <div class="Tabletoolbox fleft">Item 1 Left</div> </div>