Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Hada

[Resolvido] Ajustar largura de acordo com o conteúdo do elemento

Por , em Desenvolvimento frontend

Recommended Posts

Hada    0

Hada
Postado

Bom, toda div quando criada vem por padrão 100% de width, certo?

 

Então, eu queria saber como que faço pra criar uma div com o menor width possível, sendo que esse width se ajuste de acordo com o conteúdo da div...

 

Abrass.

Compartilhar este post

Link para o post
Compartilhar em outros sites

NewNew    0

NewNew
Postado

faz assim:

#id_DA_DIV_AQUI
{
width:16px;
}
se seu conteudo passar de 16px ela vai aumentar automaticamente enteudeu ???

 

o codigo fica assim

<html>
<head>
<style>
#id_DA_DIV_AQUI
{
width:16px;
}
</style>
</head>
<body>
<div id ="id_DA_DIV_AQUI">bla bla blabla bla blabla bla blabla bla bla</div>
</body>
</html>
qualquer duvida post aqui...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Patrícia Machado    1

Patrícia Machado
Postado

O problema de fazer assim é se ela tiver mais de uma div, principalmente se essa segunda div ficar em float com essa primeira e ambas tiverem imagem de fundo!

 

Então se quer q a div seja flexível ao texto, tire o width. Mas, se quer só na horizonta, coloque o width de um tamanho e daí deixe só sem height... =) Td depende do que você realmente quer fazer.

 

Só uma diquinha para o tiozinho de cima: Não coloque o código CSS dentro da página HTML, faça uma nova.... Isso limpa o código, não pesa a página e ainda é uma questão de organização...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Hada    0

Hada
Postado

Tipo, ainda não consegui.

Eu estou tentando fazer isso com um <ul>, e não com um div, esqueci de mencionar! ;/

 

Coloquei 16 pixels, mas os <li> ficam um debaixo do outro, removi o width, mais daí ele fica como se fosse 100% ;/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Patrícia Machado    1

Patrícia Machado
Postado

--.--'' Nossa, que PEQUENO detalhe, né?

Não tem essa de 100%... --.--"" Se você não especificar o tamanho da div ele vai ficar do tamanho do seu conteúdo, não importando qual seja. Aliás, evite usar % e misturá-la a px. Use um ou outro.

Pelo que eu entendi, você só quer q as li fiquem uma ao lado da outra, não é?

Bom, de qualquer maneira segue abaixo como fazer issoe o resto só fica indicado para você alterar as coisas dentro.

 

#nomedadiv{

}

#nomedadiv ul{

}

 

#nomedadiv ul li {

display:inline;

}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Hada    0

Hada
Postado

Consegui ajustar o <ul> pra ficar de acordo com os <li>, mas só que os <li> tão flotado à esquerda, pra que fiquem na mesma linha...

 

E com isso o margin:0 auto; do <ul> pra ficar centralizado não funciona...

 

Troquei o float:left do <li> pelo display:inline, agora ficou centralizado, mas todos os <li> tem um background, e daí com o display inline aparece tipo uma margem no topo dos backgrounds...

 

E agora? Pra onde vou? :X

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Nos mostre o CSS aplicado ao menu e o respectivo HTML... Ah! Seria bem melhor também se pudesse nos passar um link para que pudéssemos ver o problema de fato... Seria possível? :mellow: Só o menu, não precisa ser a página inteira...

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Eu acho que o melhor, seria então usar um elemento inline... como um span...

Diferente dos nível de bloco, ele não se comporta, ocupando 100% do width do elemento pai...

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito