Cum să aliniezi ultimele 3 elemente din meniu la dreapta - Meniu principal WordPress

Question

Cum să aliniezi ultimele 3 elemente din meniu la dreapta - Meniu principal WordPress

27 mar. 2015, 02:50:09

Vizualizări: 25.2K

Voturi: 0

Aș dori să stilizez meniul orizontal principal WordPress astfel încât primele 3 elemente să fie aliniate la stânga și ultimele 3 elemente să fie aliniate la dreapta.

Acest lucru va crea aspectul a două meniuri (cu login etc., în dreapta) dar va face mai ușor să-l restilizăm pentru a crea un meniu responsiv cu ultimele trei elemente în partea de jos.

MENIU:

<UL> 
<li>1a</li><li>2a</li><li>3a</li> <-stânga    dreapta-> <li>4a</li><li>5a</li><li>6a</li>
</UL>

Folosirea float left și right face ca ultimele 3 elemente să-și schimbe ordinea, dar am nevoie ca ele să rămână în ordine.

Aș dori o soluție care să nu necesite crearea unui meniu separat sau schimbarea ordinii elementelor din meniu pentru ca float:right să le pună înapoi în ordinea corectă.

Am încercat diverse combinații de display:inline-block și text-align:left/right, fără succes.

EDITARE: Aș dori să fac acest lucru fără a adăuga markup în meniul în sine. (Cu excepția cazului în care răspunsul ilustrează și cum să adăugăm markup într-un meniu orizontal WordPress.)

AJD

349

meniuri

Comentarii

Aceasta este pur și simplu o problemă de CSS și probabil mai potrivită pentru StackOverflow.

Howdy_McGee

27 mar. 2015 05:37:13

Înțeleg ce vrei să spui. Inițial nu am specificat în întrebare că vorbesc despre meniurile WordPress. Totuși, este vorba despre un meniu WordPress, altfel răspunsul dat de Andrei Gheorghiu ar fi fost acceptabil și el. Cu toate acestea, într-un meniu WordPress nu cred că este atât de ușor să adaugi markup HTML în locuri specifice.

AJD

28 mar. 2015 05:23:39

Nu contează dacă meniul este WordPress sau nu, după cum vezi în răspuns, nu există nimic specific WordPress pentru a rezolva problema.

cybmeta

28 mar. 2015 11:38:33

Toate răspunsurile la întrebare

Trebuie să înfășurați cele două grupuri (elementele aliniate la stânga și la dreapta) în două containere. Apoi setați float la left, respectiv right pe acele containere.

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

Și asigurați-vă că elementele din interior au display setat la inline-block. De asemenea, doriți să setați proprietatea overflow a elementului ul la 'hidden', pentru a vă asigura că se extinde pentru a conține toți copiii, deoarece ambii sunt plutitori.

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

Setarea overflow: hidden pentru toate elementele ul din proiectul dvs. poate să nu fie o idee foarte bună, așa că ați putea dori să găsiți un selector părinte al elementului ul și să îl adăugați în fața selectorului ul. (ex: .some-container-class-here ul { overflow: hidden;} )

tao

985

27 mar. 2015 03:12:01

Comentarii

Înțeleg cum ar funcționa acest lucru, dar fiind un meniu WordPress, nu știu cum să adaug markup-ul suplimentar.

AJD

28 mar. 2015 05:20:06

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

Există o modalitate mai ușoară fără modificări de markup și cu CSS minim. Demo live/fiddle aici, codul mai jos:

<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