[Resolvido] Lists com width´s diferentes

[Kaue Machado 0]

Fala galera do fórum, to com uma dúvida aqui:

nesse site: http://www.boost.art.br

eu estou criando um menu com jquery na lateral, quando passo o mouse ele adiciona tantos pixels de padding, isso funciona. O problema é que a largura de todos os itens está ficando a mesma, ou seja, de acordo com a <ul>, então se o primeiro item fica com 300px de largura, a lista toda fica com 300px.

 

Mas o problema não é o jquery, é o css, no estado inicial eles já tem a mesma largura, eu queria que cada um tivesse a largura que o link/texto está ocupando.

 

 

Valeu pela ajuda!

[Eliseu M. 2]

Adicione à #menu li:

 

float: left;
clear: left;

[Kaue Machado 0]

Funcionou!

Valeu Eliseu! O que fez a diferença ai foi o "clear: left", certo? Pode me dizer qual a função dele? Eu quase não uso o "clear"...

[Eliseu M. 2]

xD É a magia do clear...

Para entendê-lo, você tem que perceber que o conteúdo das páginas seguem um fluxo, da esquerda para a direita, de cima para baixo. E outra coisa importante é o display. O inline mantêm o fluxo no mesmo nível, como os elementos span, strong, a... já o block quebra o fluxo (se não houver float).

Com o float é possível quebrar o fluxo dos elementos com display:block, e o clear faz o fluxo voltar ao normal. O mais usado é o clear:both, usado para quebrar os floats left e right.

 

Uma explicação bem melhor: http://css.flepstudi...loat-clear.html

 

Até!

[Kaue Machado 0]

Tá explicado! Valeu mesmo!

[Henrique Barcelos 290]

O problema é que a largura de todos os itens está ficando a mesma, ou seja, de acordo com a <ul>, então se o primeiro item fica com 300px de largura, a lista toda fica com 300px.

Esse é o comportamento padrão.

Se quer evitá-lo, coloque uma largura fixa na tag <ul> e tenha certeza que a propriedade overflow esteja com o valor 'visible' também [esse valor é padrão, se não tiver nada, não precisa colocar].