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>

— correr todos os dias
fonte

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

 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