Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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.
Fala Wanderson blza?
display:inline não funfa?
Não caras! Outra coisa?
Eu vim pedir ajuda porque eu tentei tudo que sei já. Esperando algo de você! Obrigado!
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>Lista definida (dd, dt, dl) e não lista não ordenada (ul, li). Dormimos no ponto.
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?
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;
}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;
} 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>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>Eu sei cara, mas acontece, que no seu código tem apenas 4 links, e se você precisasse de 30 links? Ele quebrar linha.
>
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;
} 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.
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?
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.
>
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.
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é?
display: inline no li.
http://jsfiddle.net/TZKHK/