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>
html css width css-float correr todos os dias
fonte

Respostas:

158

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

jcomeau_ictx
fonte
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

Arca
fonte
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.

Riley
fonte
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";
}
Bernard V
fonte
9

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

Michael
fonte
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;)
simhumileco
fonte
1

Tente adicionar display:block;ao seu test1

DevenX
fonte
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>
Expandir trecho

Bhaskar Pramanik
fonte
0

&#160;pode fazer o truque; funciona em documentos XSL

Daniel Forrest
fonte
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

frito da morte
fonte
-1

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

Krzysztof AN
fonte