Como fazer um div sem conteúdo ter largura?


110

Estou tentando adicionar uma largura a a div, mas parece que estou tendo um problema porque não há conteúdo.

Aqui está o CSS e HTML que tenho até agora, mas não está funcionando:

CSS

body{
margin:0 auto;
width:1000px
}
ul{
width:800px;
}
ul li{
clear:both;
}
.test1{
width:200px;
float:left;
}

HTML

<body>
  <div id="test">
    <ul>
      <li>
        <div class="test1">width1</div>
        <div class="test1">width2</div>
        <div class="test1">width3</div>
      </li>
      <li>
        <div class="test1"></div>
        <div class="test1">width2</div>
        <div class="test1">width3</div>
      </li>
      <li>
        <div class="test1"></div>
        <div class="test1">width2</div>
        <div class="test1">width3</div>
      </li>
    </ul>
 </div>

Respostas:


158

um div geralmente precisa de pelo menos um espaço ininterrupto (& nbsp;) para ter uma largura.


28
use "display: inline-block"
Luccas

boa solução, se eu usar "" em vez de & nbsp; não funciona. mas por quê?
Amitābha

1
'& nbsp;' é uma boa técnica em oposição à altura mínima porque não força uma altura. Digamos que o tamanho da fonte esteja definido como 16 px e o preenchimento seja 15 px. Seu div manterá a mesma altura antes e depois de o texto ser adicionado ao div (presumindo que esteja tudo em uma linha)
eroedig

para mim, colocar um espaço não funciona! o div com largura de 100 px e dentro de & nbsp; não parece ter 100 px em uma div com elementos flex inline
Micky

89

Use padding, heightou &nbsp para que a largura tenha efeito com vaziodiv

EDITAR:

Diferente de zero min-heighttambém funciona bem


5
Eu prefiro a solução de preenchimento, qualquer preenchimento maior que 0 funcionará. Dessa forma, você não tem um estranho selecionável &nbsp;no div.
Brian Duncan,

1
Observação: para solução de preenchimento, você precisa fornecer preenchimento esquerdo / direito e superior / inferior para que funcione.
Govind Rai

62

Use min-height: 1px; Everything tem pelo menos altura mínima de 1px, então nenhum espaço extra é ocupado com nbsp ou preenchimento, ou sendo forçado a saber a altura primeiro.


2
Suas soluções me parecem as mais limpas, mas tenho tentado encontrar o motivo disso nas especificações CSS e não consigo encontrar em nenhum lugar, o mais próximo que encontrei foi CSS 2.1, 9.5 Floatsonde diz Note: this means that floats with zero outer height or negative outer height do not shorten line boxes., mas fala sobre caixas de linha, ou seja, linhas em um parágrafo, mas não sobre as caixas adjacentes. Alguém mais familiarizado com as especificações CSS?
Jaime Hablutzel

Isso funcionou melhor para mim. Tentei a maioria das outras sugestões aqui, exceto & nbsp ;.
ayahuasca de

28

Use CSS para adicionar um espaço de largura zero ao seu div. O conteúdo do div não ocupará espaço, mas forçará o div a exibir

.test1::before{
   content: "\200B";
}

9

Tem largura, mas não tem conteúdo ou altura. Adicione um atributo de altura à classe test1.


7

Existem diferentes métodos para tornar o DIV vazio com float: leftou float: rightvisível.

Aqui está o que eu conheço:

  • definir width(ou min-width) com height(ou min-height)
  • ou conjunto padding-top
  • ou conjunto padding-bottom
  • ou conjunto border-top
  • ou conjunto border-bottom
  • ou use pseudo-elementos : ::beforeou ::aftercom:
    • {content: "\200B";}
    • ou {content: "."; visibility: hidden;}
  • ou colocado &nbsp;dentro de DIV (isso às vezes pode trazer efeitos inesperados, por exemplo, em combinação com text-decoration: underline;)


1

Tarde demais para responder, mas mesmo assim.

Ao usar CSS, para estilizar o div (content-less), a propriedade min-height deve ser definida como "n" px para tornar o div visível (funciona com webkits e cromo, mas não tenho certeza se esse truque funcionará no IE6 e mais baixo)

Código:

.shape-round{
  width: 40px;
  min-height: 40px;
  background: #FF0000;
  border-radius: 50%;
}
<div class="shape-round"></div>



0

Eu tive o mesmo problema. Eu queria que os ícones aparecessem pressionando o botão, mas sem nenhum movimento e deslizando o ambiente, assim como a lâmpada: acendendo e apagando, aparecendo e desaparecendo, então precisei fazer um div vazio com tamanhos fixos.

width: 13px;
min-width: 13px;

fez o truque para mim


-1

Você adiciona ao CSS deste DIV position: relative, ele fará todo o trabalho.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.