Itens da lista Horizontal CSS

Então, eu tentei criar uma lista horizontal para uso em um novo site que estou projetando. Eu tentei uma série de sugestões encontradas on - line já, tais como a configuração "float" para a esquerda e tal-no entanto, nenhum destes têm funcionado quando se trata de corrigir o problema.

    ul#menuItems {
      background: none;
      height: 50px;
      width: 100px;
      margin: 0;
      padding: 0;
    }
    ul#menuItems li {
      display: inline;
      list-style: none;
      margin-left: auto;
      margin-right: auto;
      top: 0px;
      height: 50px;
    }
    ul#menuItems li a {
      font-family: Arial, Helvetica, sans-serif;
      text-decoration: none;
      font-weight: bolder;
      color: #000;
      height: 50px;
      width: auto;
      display: block;
      text-align: center;
      line-height: 50px;
    }
<ul id="menuItems">
  <li>
    <a href="index.php">Home</a>
  </li>
  <li>
    <a href="index.php">DJ Profiles</a>
  </li>
</ul>
Actualmente, Não tenho a certeza do que está a causar esta questão, como é que eu a resolveria?

Author: janisz, 2013-03-30
Source

5 answers

Resposta Actualizada

Reparei que muitas pessoas estão a usar esta resposta, por isso decidi actualizá-la um pouco. Se você quiser ver a resposta original, confira abaixo. A nova resposta demonstra como você pode adicionar algum estilo à sua lista. 

ul > li {
    display: inline-block;
    /* You can also add some margins here to make it look prettier */
    zoom:1;
    *display:inline;
    /* this fix is needed for IE7- */
}
<ul>
    <li> <a href="#">some item</a>

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

    </li>
</ul>
 65
Author: What have you tried, 2016-06-09 11:05:48

Este violino mostra como

Http://jsfiddle.net/9th7X/

ul, li {
    display:inline
}

Grandes referências em listas e css aqui:

Http://alistapart.com/article/taminglists/

 6
Author: PaulProgrammer, 2013-03-29 20:14:15

Uma maneira muito melhor é usar {[[2]}, porque você não precisa mais usar clear:both no final da sua lista.

Tenta isto: 

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

CSS: 

ul > li{
    display:inline-block;
}
Olha para isto aqui. http://jsfiddle.net/shahverdy/4N6Ap/
 4
Author: Mostafa Shahverdy, 2013-03-29 20:14:08

Também pode utilizar blocos em linha para evitar elementos flutuantes 

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

E depois estilo como: 

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

Assim não precisarás de flutuar nada, eliminando a necessidade de clearfixes

 1
Author: Jamie, 2013-03-29 20:16:17

Aqui poderá encontrar um exemplo de trabalho, com mais algumas sugestões sobre o redimensionamento dinâmico da lista.

Usei o ecrã: bloco em linha e uma percentagem de enchimento para que a lista-mãe possa mudar dinamicamente o tamanho: 

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

Mais duas regras para remover enchimento para o primeiro e último itens.

ul#menuItems li:first-child{padding-left:0;}
ul#menuItems li:last-child{padding-right:0;}
 0
Author: alexcasalboni, 2013-03-29 20:28:30