Elemente de listă orizontală (Programare, Html, Css)

Christopher Orchard a intrebat.

Deci, am încercat să creez o listă orizontală pentru a o folosi pe un nou site web pe care îl proiectez. Am încercat o serie de sugestii găsite deja online, cum ar fi setarea „float” la stânga și altele asemenea – totuși, niciuna dintre acestea nu a funcționat când a venit vorba de rezolvarea problemei.

În prezent, nu sunt sigur de ceea ce cauzează această problemă, cum aș putea să o rezolv?

Comentarii

6 răspunsuri
Ce ai încercat

Răspuns actualizat

Am observat că multă lume folosește acest răspuns așa că am decis să îl actualizez puțin. Dacă vreți să vedeți răspunsul original, verificați mai jos. Noul răspuns demonstrează cum poți adăuga un pic de stil listei tale.

Comentarii

  • răspuns upvoted pentru că rezolvă problema, dar flotoarele sunt lame și vechi! dacă nu folosiți IE7-, ar trebui să folosiți display:inline-block; –  > Por PlantTheIdea.
  • @LifeInTheGrey Acesta este un punct de vedere foarte bun – Voi adăuga asta ca o a doua opțiune – Vă mulțumesc pentru sfaturi –  > Por Ce ați încercat.
  • Lista se prăbușește atunci când fereastra browserului este redimensionată – există o modalitate de a preveni acest lucru? În mod ideal, lista ar trebui să-și păstreze aspectul orizontal, indiferent de situație. Cum se poate realiza acest lucru? –  > Por zero_cool.
  • @Jackson_Sandland Set a min-width pe ul element: #my-list{ min-width: 780px; } –  > Por Ce ați încercat.
PaulProgrammer

Această scripcă arată cum

http://jsfiddle.net/9th7X/

ul, li {
    display:inline
}

Referințe excelente despre liste și css aici:

http://alistapart.com/article/taminglists/

Comentarii

  • Sunt șanse mari ca problema dvs. să nu aibă nimic de-a face cu Bootstrap. Este mai probabil ca CSS-ul dvs. să aibă suprapuneri care cauzează acest lucru display:inline directiva să fie ineficientă. –  > Por PaulProgramator.
  • Elementul Firefox inspect spune că regula este activată: i.imgur.com/Picq9Lr.png –  > Por Aaron Franke.
  • Funcționează în fiddle? Dacă da, probabil că merită o întrebare proprie. –  > Por PaulProgramator.
Mostafa Shahverdy

O modalitate mult mai bună este de a utiliza inline-block, deoarece nu este nevoie să folosiți clear:both la sfârșitul listei.

Încearcă asta:

<ul>
    <li>
        <a href="#">some item</a>
    </li>
    <li>
        <a href="#">another item</a>
    </li>
</ul>

CSS:

ul > li{
    display:inline-block;
}

Aruncați o privire aici : http://jsfiddle.net/shahverdy/4N6Ap/

Jamie

Ai putea, de asemenea, să folosești blocuri inline pentru a evita elementele plutitoare

<ul>
    <li>
        <a href="#">some item</a>
    </li>
    <li>
        <a href="#">another item</a>
   </li>
</ul>

și apoi să stilizați ca:

li{
    /* with fix for IE */
    display:inline;
    display:inline-block;
    zoom:1;
    /*
    additional styles to make it look nice
    */
 }

în acest fel, nu va fi nevoie să plutiți nimic, eliminând nevoia de clearfixes.

Comentarii

  • Am încercat acest lucru, dar tot nu sunt afișate pe orizontală – www.s4nr.com/SpecialTesting -.  > Por Christopher Orchard.
  • @LoadData meniul dvs. are o lățime de 100px, iar li-urile dvs. au o lățime combinată de 128px, astfel încât al doilea element va coborî la linia următoare. –  > Por Jamie.
alexcasalboni

Aici puteți găsi un exemplu funcțional, cu mai multe sugestii despre redimensionarea dinamică a listei.

Am folosit display:inline-block și o umplutură procentuală, astfel încât lista părintească să își poată schimba în mod dinamic dimensiunea:

display:inline-block;
padding:10px 1%;
width: 30%

plus încă două reguli pentru a elimina umplutura pentru primul și ultimul element.

ul#menuItems li:first-child{padding-left:0;}
ul#menuItems li:last-child{padding-right:0;}

suban khoja

Cred că soluția simplă pe care am găsit-o este cea de mai jos

ul{
    display:flex;
}

Tags:,