Jak zrobić, aby lista HTML była wyświetlana poziomo zamiast pionowo przy użyciu tylko CSS?

Question

Potrzebuję tego, ponieważ chcę, aby menu (utworzone z listy HTML) było wyświetlane poziomo.

Wolę nie używać pozycjonowania bezwzględnego, ponieważ może to być kłopotliwe, gdy zacznę zmieniać układ strony.

Chciałbym również usunąć wcięcia z podlist. Czy to możliwe?

Answer 1

Będziesz musiał użyć coś jak poniżej

#menu ul{ 
 
    list-style: none; 
 
} 
 
#menu li{ 
 
    display: inline; 
 
} 
 
\t

<div id="menu"> 
 
    <ul> 
 
    <li>First menu item</li> 
 
    <li>Second menu item</li> 
 
    <li>Third menu item</li> 
 
    </ul> 
 
</div>

Answer 2

dość prosta:

ul.yourlist li { float:left; } 

lub

ul.yourlist li { display:inline; } 

Answer 3

Oto ten jedyny sposób na to pytanie.

DEMO

HTML

<div id="menu"> 
    <ul> 
    <li>First menu item</li> 
    <li>Second menu item</li> 
    <li>Third menu item</li> 
    </ul> 
</div> 

CSS

#menu ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
#menu li { 
    display: inline-block; 
}