Come creare una visualizzazione <ul> in una riga orizzontale

106

Come posso fare in modo che gli elementi della mia lista appaiano orizzontalmente in una riga utilizzando CSS?

#div_top_hypers {
    background-color:#eeeeee;
    display:inline;      
}
#ul_top_hypers {
    display: inline;
}

<div id="div_top_hypers">
    <ul id="ul_top_hypers">
        <li>&#8227; <a href="" class="a_top_hypers"> Inbox</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Compose</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Reports</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Preferences</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> logout</a></li>
    </ul>
</div>

Espandi lo snippet

html css html-lists

— Babiker
fonte

buona domanda. Credo che il fuoco qui è davvero come fare questo in linea con i più recenti standard web

— andy

132

Gli elementi dell'elenco sono normalmente elementi di blocco. Trasformali in elementi in linea tramite la displayproprietà.

Nel codice che hai fornito, devi utilizzare un selettore di contesto per applicare la display: inlineproprietà agli elementi dell'elenco, invece dell'elenco stesso (l'applicazione display: inlineall'elenco generale non avrà alcun effetto):

#ul_top_hypers li {
    display: inline;
}

Ecco l'esempio di lavoro:

#div_top_hypers {
    background-color:#eeeeee;
    display:inline;      
}
#ul_top_hypers li{
    display: inline;
}

<div id="div_top_hypers">
    <ul id="ul_top_hypers">
        <li>&#8227; <a href="" class="a_top_hypers"> Inbox</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Compose</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Reports</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Preferences</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> logout</a></li>
    </ul>
</div>

Espandi lo snippet

— hbw
fonte

2

Ho anche ottenuto questo effetto utilizzando float, mantenendo così la natura di blocco degli elementi dell'elenco.

— Joel

1

Questo è un approccio interessante, devo dire, tuttavia, penso che creerebbe alcuni problemi inutili con i margini e simili, dal momento che stai effettivamente sollevando gli elementi dell'elenco fuori dal modello della scatola.

— hbw

1

@htw: potresti rimetterlo in marcia con una qualsiasi delle soluzioni clearfix.

— alex

2

Puoi sempre usare display: inline-block se vuoi mantenere la natura del blocco ... anche se non è completamente supportato in questa fase (credo che sia Fx2 il principale colpevole).

— James B,

17

Puoi anche impostarli in modo che fluttuino a destra.

#ul_top_hypers li {
    float: right;
}

Ciò consente loro di essere ancora a livello di blocco, ma appariranno sulla stessa riga.

— alex
fonte

1

Farli fluttuare a destra avrà un effetto in più: cambierà l'ordine in modo che da sinistra a destra saranno gli ultimi al primo.

— Matthew James Taylor

Ah sì, dovranno essere invertiti nel markup (tanto per la separazione del layout / markup!)

— alex

11

Impostare la displayproprietà su inlineper l'elenco a cui si desidera applicare ciò. C'è una buona spiegazione per la visualizzazione di elenchi in A List Apart .

— Paul Morie
fonte

8

Come @alex Detto questo, si potrebbe galleggiare bene, ma se si voleva mantenere il markup lo stesso, galleggiare a sinistra!

#ul_top_hypers li {
    float: left;
}

— tjhorner
fonte

7

Funzionerà per te:

#ul_top_hypers li {
    display: inline-block;
}

— vikram mohod
fonte

4

Come altri hanno già detto, puoi impostare il lia display:inline;, o floatil lisinistro o il destro. Inoltre, puoi anche usare display:flex;su ul. Nello snippet qui sotto ho anche aggiunto justify-content:space-aroundper dargli più spaziatura.

Per ulteriori informazioni su flexbox, controlla questa guida completa .

#div_top_hypers {
    background-color:#eeeeee;
    display:inline;      
}
#ul_top_hypers {
    display: flex;
    justify-content:space-around;
    list-style-type:none;
}

<div id="div_top_hypers">
    <ul id="ul_top_hypers">
        <li>&#8227; <a href="" class="a_top_hypers"> Inbox</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Compose</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Reports</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Preferences</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> logout</a></li>
    </ul>
</div>

Espandi lo snippet

— Matthew Johnson
fonte

3

#ul_top_hypers li {
  display: flex;
}

— Kumar Saket
fonte