Wanderson Valerio 102 Denunciar post Postado Julho 4, 2013 Olá pessoal!Estou contando com a ajuda de vocês para ajuda em um problema que surgiu aqui, estou precisando fazer com que uma lista definida, seja forçada a ficar em uma linha única, mesmo que ultrapasse a largura do elemento pai.Alguma luz pro meu problema? Obrigado. Compartilhar este post Link para o post Compartilhar em outros sites
Ricardo Barantini 33 Denunciar post Postado Julho 4, 2013 display: inline no li. http://jsfiddle.net/TZKHK/ Compartilhar este post Link para o post Compartilhar em outros sites
Marcos Xavier 189 Denunciar post Postado Julho 4, 2013 Fala Wanderson blza? display:inline não funfa? Compartilhar este post Link para o post Compartilhar em outros sites
Wanderson Valerio 102 Denunciar post Postado Julho 4, 2013 Não caras! Outra coisa? Eu vim pedir ajuda porque eu tentei tudo que sei já. Esperando algo de você! Obrigado! Compartilhar este post Link para o post Compartilhar em outros sites
Bru_ce 53 Denunciar post Postado Julho 4, 2013 Veja se é isso que deseja: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Documento sem título</title> <style type="text/css"> ul { width:970px; margin:0 auto; background-color:#ccc; height:30px; padding-top:10px; } li { list-style:none; display:inline; padding:0 10px 0 0; } </style> </head> <body> <ul> <li>LINK 1</li> <li>LINK 2</li> <li>LINK 3</li> <li>LINK 4</li> </ul> </body> </html> Compartilhar este post Link para o post Compartilhar em outros sites
Ricardo Barantini 33 Denunciar post Postado Julho 4, 2013 Lista definida (dd, dt, dl) e não lista não ordenada (ul, li). Dormimos no ponto. Compartilhar este post Link para o post Compartilhar em outros sites
Wanderson Valerio 102 Denunciar post Postado Julho 4, 2013 Não não, lista ordenada mesmo... Mas não é exatamente o que você mostrou, eu quero que aconteça isso, mas quando tiver 15 itens na lista por exemplo, ele vai ultrapassar o limite do elemento pai, e mesmo assim vai seguir na linha, não vai quebrar. Entende? Compartilhar este post Link para o post Compartilhar em outros sites
Marcos Xavier 189 Denunciar post Postado Julho 4, 2013 Seguindo o exemplo do Bru_ce ul { width:970px; margin:0 auto; background-color:#ccc; height:30px; padding-top:10px; white-space:nowrap; } li { list-style:none; display:inline; padding:0 10px 0 0; } Compartilhar este post Link para o post Compartilhar em outros sites
Wanderson Valerio 102 Denunciar post Postado Julho 4, 2013 white-space: nowrap; Não deu certo, vou postar o meu código até agora: .aps-destaques-list { width: 958px !important; height: 360px; position: relative; float: left; white-space: nowrap; } .aps-destaques-list > li { width: 238px; height: 360px; border-right: 1px solid #d5dce1; margin: 4px 0 0 0; display: block !important; float: left; } No caso, .aps-destaques-list seleciona o elemento <ul> Compartilhar este post Link para o post Compartilhar em outros sites
Marcos Xavier 189 Denunciar post Postado Julho 5, 2013 Testei aqui e não quebrou linha não. Só estourou os limites de layout mesmo. Vê ae.... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Documento sem título</title> <style type="text/css"> ul { width:970px; margin:0 auto; background-color:#ccc; height:30px; padding-top:10px; white-space:nowrap; } li { list-style:none; display:inline; padding:0 10px 0 0; } </style> </head> <body> <ul> <li>LINK 1</li> <li>LINK 2</li> <li>LINK 3</li> <li>LINK 4</li> </ul> </body> </html> Compartilhar este post Link para o post Compartilhar em outros sites
Wanderson Valerio 102 Denunciar post Postado Julho 5, 2013 Eu sei cara, mas acontece, que no seu código tem apenas 4 links, e se você precisasse de 30 links? Ele quebrar linha. Compartilhar este post Link para o post Compartilhar em outros sites
zcommand 7 Denunciar post Postado Julho 5, 2013 white-space: nowrap; Não deu certo, vou postar o meu código até agora: .aps-destaques-list { width: 958px !important; height: 360px; position: relative; float: left; white-space: nowrap; } .aps-destaques-list > li { width: 238px; height: 360px; border-right: 1px solid #d5dce1; margin: 4px 0 0 0; display: block !important; float: left; } No caso, .aps-destaques-list seleciona o elemento <ul> cara eu não intendi bem oq vc ta querendo, mas acho q é vc quer q os itens da lista fique em linha mesmo se ultrapassar o width do pai é isso? se for isso q vc ta tentado fazer não vai adiantar colocar uma largura no li, pois ele vai seguir o tamanho do ul ou ol, sendo assim é na lista (ul / ol) que vc vai colocar o tamanho. Compartilhar este post Link para o post Compartilhar em outros sites
Wanderson Valerio 102 Denunciar post Postado Julho 5, 2013 Olá @zcommand, eu entendo que você queira ajudar, mas cá entre nós, tente entender o que estou passando primeiro. Como citei: No caso, .aps-destaques-list seleciona o elemento <ul> E no meu CSS, é claro que o <ul> está com largura definida. Desculpe ser grosso, mas não trabalho com CSS desde ontem. Estou realmente com dificuldades. Alguma luz Marcos? Compartilhar este post Link para o post Compartilhar em outros sites
Marcos Xavier 189 Denunciar post Postado Julho 5, 2013 Wanderson , o exemplo que eu postei , testei no Chrome e Firefox com uns 200 elementos li e não foi pulou linha não. Nã esqueça do display:inline no elemento li. Compartilhar este post Link para o post Compartilhar em outros sites
zcommand 7 Denunciar post Postado Julho 5, 2013 Olá @zcommand, eu entendo que você queira ajudar, mas cá entre nós, tente entender o que estou passando primeiro. Como citei: E no meu CSS, é claro que o <ul> está com largura definida. Desculpe ser grosso, mas não trabalho com CSS desde ontem. Estou realmente com dificuldades. Alguma luz Marcos? Desculpe Wenderson, não quis questionar seu conhecimento é que apenas vc tinha colocado uma largura inferior no li, então achei q vc teria colocado por engano, tem coisas q passam e nem reparamos, mas o exemplo do marcos parece funcional e vc disse que não dava certo mesmo assim, eu so não intendi bem qual aplicação vc queria com isso. Compartilhar este post Link para o post Compartilhar em outros sites
Wanderson Valerio 102 Denunciar post Postado Julho 5, 2013 Relaxa cara, não sou dono da verdade... E também não estava dizendo que você estava errado. Somente que você passou despercebido... Marcos, resolvi isso de outra forma ashduasdhasudhasdhasdsahdusa gambiarra louca aqui. Obrigado a vocês três! Mesmo eu usando gambiarra sei o que causou o problema... Dentro das <li> eu estava usando divs e tudo mais, e nos elementos de bloco eu esqueci de definir display: inline; As CSS não herdam essa declaração, né? Compartilhar este post Link para o post Compartilhar em outros sites
