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.
Actualmente, Não tenho a certeza do que está a causar esta questão, como é que eu a resolveria?
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>
39
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
ul, li {
display:inline
}
Grandes referências em listas e css aqui:
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