¿Cómo hacer que una lista HTML aparezca horizontalmente en lugar de verticalmente usando solo CSS?

Question

Lo necesito porque quiero hacer que un menú (que está hecho de una lista HTML) aparezca horizontalmente.

Prefiero no utilizar el posicionamiento absoluto, ya que puede ser complicado cuando comienzo a cambiar el diseño de la página.

También me gustaría eliminar la sangría de las listas secundarias. ¿Es posible?

Answer 1

Usted tendrá que usar algo como continuación

#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

bastante simple:

ul.yourlist li { float:left; } 

o

ul.yourlist li { display:inline; } 

Answer 3

Aquí es la otra forma de esta pregunta.

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