Cómo alinear los últimos 3 elementos del menú a la derecha - Menú principal de WordPress

Question

Cómo alinear los últimos 3 elementos del menú a la derecha - Menú principal de WordPress

27 mar 2015, 02:50:09

Vistas: 25.2K

Votos: 0

Me gustaría estilizar el menú horizontal principal de WordPress para que los primeros 3 elementos estén alineados a la izquierda y los últimos 3 elementos estén alineados a la derecha.

Esto creará la apariencia de dos menús (con inicio de sesión, etc., a la derecha) pero facilitará reestilizarlo para crear un menú responsivo con los últimos tres elementos en la parte inferior.

MENÚ:

<UL> 
<li>1a</li><li>2a</li><li>3a</li> <-izquierda    derecha-> <li>4a</li><li>5a</li><li>6a</li>
</UL>

Usar float left y right hace que los últimos 3 elementos cambien de orden, necesito que permanezcan en orden.

Me gustaría una solución que no requiera crear un menú separado o cambiar el orden de los elementos del menú para que el float:right los vuelva a colocar en el orden correcto.

He probado varias combinaciones de display:inline-block y text-align:left/right, sin éxito.

EDICIÓN: Me gustaría hacer esto sin agregar marcado en el menú mismo. (A menos que la respuesta también ilustre cómo agregar marcado en un menú horizontal de WordPress.)

AJD

349

menús

Comentarios

Esto es puramente un problema de CSS y probablemente más adecuado para StackOverflow.

Howdy_McGee

27 mar 2015 05:37:13

Entiendo lo que quieres decir. Inicialmente no especifiqué en la pregunta que estoy hablando de menús de Wordpress. Sin embargo, se trata de un menú de Wordpress, de lo contrario la respuesta dada por Andrei Gheorghiu también sería aceptable. Pero en un menú de Wordpress no creo que sea tan fácil añadir marcado HTML en lugares específicos.

AJD

28 mar 2015 05:23:39

No importa si el menú es de WordPress o no, como ves en la respuesta, no hay nada específico de WordPress para resolver el problema.

cybmeta

28 mar 2015 11:38:33

Todas las respuestas a la pregunta

Necesitas envolver tus dos grupos (elementos alineados a la izquierda y a la derecha) en dos contenedores. Luego estableces float left, respectivamente right en esos contenedores.

<UL> 
    <div class="pull-left"><li>1a</li><li>2a</li><li>3a</li></div>
    <div class="pull-right"><li>4a</li><li>5a</li><li>6a</li></div>
</UL>

Y asegúrate de que los elementos internos tengan display establecido como inline-block. También querrás establecer la propiedad overflow del elemento ul como 'hidden', para asegurarte de que se expanda y contenga todos los hijos, ya que ambos están flotando.

.pull-left { float: left; }
.pull-right { float: right; }
.pull-left li, .pull-right li { display: inline-block; }
ul { overflow: hidden; }

Establecer overflow: hidden para todos los elementos ul en tu proyecto podría no ser una buena idea, así que quizás quieras encontrar un selector padre de tu ul y agregarlo delante del selector ul. (ej: .some-container-class-here ul { overflow: hidden;} )

tao

985

27 mar 2015 03:12:01

Comentarios

Puedo ver cómo esto funcionaría, pero al ser un menú de Wordpress, no sé cómo añadir el marcado adicional.

AJD

28 mar 2015 05:20:06

cfx 1.58K · Accepted Answer · 2015-03-27T04:20:57Z

Existe una forma más fácil sin cambios en el marcado y con CSS mínimo. Demo en vivo/fiddle aquí, código abajo:

<ul> 
  <li>1a</li><li>2a</li><li>3a</li><li>4a</li><li>5a</li><li>6a</li>
</ul>

ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: right;
}
li {
    float: left;
}
li:nth-last-child(1), li:nth-last-child(2), li:nth-last-child(3) {
    float: none;
    display: inline-block;
}

cfx

1.58K

27 mar 2015 04:20:57