<nav> <ul class="topnav" id="myTopnav" role="list"> <li><a href="#home">Domů</a></li> <li><a href="#news">Naše služby</a></li> <li><a href="#about">Nejčastějsí dotazy</a></li> <li><a href="#contact" class="active">Ceník</a></li> <li><a href="#about">Objednat</a></li> <li><a href="#about">Kontakt</a></li> <li><a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="hamb-icon"><img src="hamb.png" class="hamb-icon"></i></a></li> </ul> </nav>

 nav {padding:8px;} .topnav {background-color:#333; overflow:hidden;} .topnav>li>a {float:left; display:block; color:#f0f0f0; text-align:center; padding:8px 16px; font-size:14px; letter-spacing:1px; line-height:14px;} .topnav>li>a.active {background-color:#f0f0f0; color:#222; border-radius:8px;} .topnav>li>a:hover {background-color:#222; color:#f0f0f0; border-radius:8px;} .topnav>li>.icon {display:none;} .hamb-icon {max-width:14px; max-height:14px;} /* MEDIA FOR MENU RESPONSIVE */ @media screen and (max-width:740px) {.topnav>li>a {display:none;} .topnav>li>a.active {display:block; float:left;} .topnav>li>a.icon {float:right; display:block;}} @media screen and (max-width:740px) {.topnav.responsive {position:relative;} .topnav.responsive>li>a.icon {position:absolute; right:0; top:0;} .topnav.responsive>li>a {float:none; display:block; text-align:left;}} /* END OF TOPNAV MENU */

¡Menú receptivo modificado de w3! La clase .responsive aparece cuando vw es inferior a 740 agregado por JS. No es importante.

El problema es que NAV está tomando el ancho del 100 % del principal, UL toma el 100 % del ancho del NAV. Li está flotando a la izquierda, quiero que el menú completo esté en el lado derecho de la página. Ahora los elementos del menú cubren aproximadamente el 40% del ancho del sitio en una sola línea, ¡está bien! Pero del lado izquierdo...

• imposible de flotar: correcto porque es revertir el pedido..
• display:inline-block es incorrecto, LI se renderizará en líneas individuales.
• ancho: ajuste-contenido no funciona para mí ..

¿Puedes ayudarme por favor?