Come allineare gli ultimi 3 elementi del menu a destra - Menu principale WordPress

Question

Come allineare gli ultimi 3 elementi del menu a destra - Menu principale WordPress

27 mar 2015, 02:50:09

Visualizzazioni: 25.2K

Voti: 0

Vorrei stilizzare il menu orizzontale principale di WordPress in modo che i primi 3 elementi siano allineati a sinistra e gli ultimi 3 elementi siano allineati a destra.

Questo creerà l'aspetto di due menu (con login, ecc., sulla destra) ma renderà facile ristilizzarlo per creare un menu responsive con gli ultimi tre elementi in basso.

MENU:

<UL> 
<li>1a</li><li>2a</li><li>3a</li> <-sinistra    destra-> <li>4a</li><li>5a</li><li>6a</li>
</UL>

Usando float left e right gli ultimi 3 elementi cambiano ordine, ho bisogno che rimangano nell'ordine corretto.

Vorrei una soluzione che non richieda la creazione di un menu separato o il cambiamento dell'ordine degli elementi del menu per far sì che il float:right li rimetta nell'ordine giusto.

Ho provato varie combinazioni di display:inline-block e text-align:left/right, senza successo.

MODIFICA: Vorrei fare questo senza aggiungere markup nel menu stesso. (A meno che la risposta non illustri anche come aggiungere markup in un menu orizzontale WordPress.)

AJD

349

menu

Commenti

Questo è puramente un problema CSS ed è probabilmente più adatto per StackOverflow.

Howdy_McGee

27 mar 2015 05:37:13

Capisco cosa intendi. Inizialmente non ho specificato nella domanda che mi riferisco ai menu di Wordpress. Tuttavia si tratta di un menu Wordpress, altrimenti la risposta data da Andrei Gheorghiu sarebbe accettabile. Tuttavia, in un menu Wordpress non credo sia così facile aggiungere markup html in punti specifici.

AJD

28 mar 2015 05:23:39

Non importa se il menu è di WordPress o meno, come vedi nella risposta, non c'è nulla di specifico per WordPress per risolvere il problema.

cybmeta

28 mar 2015 11:38:33

Tutte le risposte alla domanda

Devi raggruppare i tuoi due gruppi (elementi allineati a sinistra e a destra) in due contenitori. Successivamente imposti float left, rispettivamente right su questi contenitori.

<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>

E assicurati che gli elementi interni abbiano display impostato su inline-block. Inoltre, dovresti impostare la proprietà overflow dell'elemento ul su 'hidden', per assicurarti che si espanda per contenere tutti i figli, visto che entrambi sono fluttuanti.

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

Impostare overflow: hidden per tutti gli elementi ul nel tuo progetto potrebbe non essere una buona idea, quindi potresti voler trovare un selettore genitore del tuo ul e aggiungerlo davanti al selettore ul. (es: .some-container-class-here ul { overflow: hidden;} )

tao

985

27 mar 2015 03:12:01

Commenti

Capisco come potrebbe funzionare, ma trattandosi di un menu di Wordpress, non so come aggiungere il markup aggiuntivo.

AJD

28 mar 2015 05:20:06

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

C'è un modo più semplice senza modifiche al markup e con CSS minimo. Demo live/fiddle qui, codice qui sotto:

<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