Comment faire en sorte qu'un div sans contenu ait une largeur?

110

J'essaie d'ajouter une largeur à a div, mais je semble rencontrer un problème car il n'a pas de contenu.

Voici le CSS et le HTML que j'ai jusqu'à présent, mais cela ne fonctionne pas:

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 rune tous les jours
la source

Réponses:

158

un div a généralement besoin d'au moins un espace insécable (& nbsp;) pour avoir une largeur.

jcomeau_ictx
la source
28
utiliser "display: inline-block"
Luccas
bonne solution, si j'utilise "" au lieu de & nbsp; ça ne marche pas, mais pourquoi?
Amitābha
1
'& nbsp;' est une bonne technique par opposition à min-height car elle ne force pas une hauteur. Supposons que la taille de votre police soit 16px et que votre remplissage soit 15px. Votre div conservera la même hauteur avant et après l'ajout du texte au div (en supposant que tout soit sur une seule ligne)
eroedig
pour moi, mettre un espace ne fonctionne pas! le div avec une largeur de 100 pixels et dans les limites de & nbsp; ne ressemble pas à 100px dans un div avec des éléments flex inline
Micky
89

Utilisez padding, heightou &nbsp pour que la largeur prenne effet avec vidediv

ÉDITER:

Non zéro min-heightfonctionne également très bien

Arche
la source
5
Je préfère la solution de remplissage, tout rembourrage supérieur à 0 fonctionnera. De cette façon, vous n'avez pas d'étrange, sélectionnable &nbsp;dans le div.
Brian Duncan
1
Remarque: pour la solution de rembourrage, vous devez fournir un rembourrage gauche / droit et haut / bas pour que cela fonctionne.
Govind Rai
62

Utiliser min-height: 1px; Tout a au moins une hauteur minimale de 1px, donc aucun espace supplémentaire n'est occupé avec nbsp ou padding, ou être obligé de connaître d'abord la hauteur.

Riley
la source
2
Vos solutions me semblent les plus propres, mais j'ai essayé de trouver la raison à cela dans la spécification CSS et je ne la trouve nulle part, la plus proche que j'ai trouvée est celle CSS 2.1, 9.5 Floatsoù il est dit Note: this means that floats with zero outer height or negative outer height do not shorten line boxes., mais cela parle de boîtes de ligne, c'est-à-dire de lignes dans un paragraphe, mais pas sur les cases adjacentes. Quelqu'un de plus familier avec les spécifications CSS?
Jaime Hablutzel
Cela a fonctionné le mieux pour moi. J'ai essayé la plupart des autres suggestions ici, sauf & nbsp ;.
ayahuasca
28

Utilisez CSS pour ajouter un espace de largeur zéro à votre div. Le contenu du div ne prendra pas de place mais forcera le div à s'afficher

.test1::before{
   content: "\200B";
}
BernardV
la source
9

Il a une largeur mais pas de contenu ni de hauteur. Ajoutez un attribut de hauteur à la classe test1.

Michael
la source
7

Il existe différentes méthodes pour rendre le DIV vide avec float: leftou float: rightvisible.

Voici ceux que je connais:

  • régler width(ou min-width) avec height(ou min-height)
  • ou définir padding-top
  • ou définir padding-bottom
  • ou définir border-top
  • ou définir border-bottom
  • ou utilisez des pseudo-éléments : ::beforeou ::afteravec:
    • {content: "\200B";}
    • ou {content: "."; visibility: hidden;}
  • ou mettre &nbsp;dans DIV (cela peut parfois apporter des effets inattendus, par exemple en combinaison avec text-decoration: underline;)
simhumileco
la source
1

Essayez d'ajouter display:block;à votre test1

DevenX
la source
1

Trop tard pour répondre, mais néanmoins.

Lors de l'utilisation de CSS, pour styliser le div (sans contenu), la propriété min-height doit être définie sur "n" px pour rendre le div visible (fonctionne avec les webkits et chrome, sans savoir si cette astuce fonctionnera sur IE6 et inférieur)

Code:

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

Bhaskar Pramanik
la source
0

&#160;peut faire l'affaire; fonctionne dans les documents XSL

Daniel Forrest
la source
0

J'ai eu le même problème. Je voulais que les icônes apparaissent en appuyant sur le bouton mais sans aucun mouvement et en faisant glisser l'environnement, tout comme l'ampoule: allumée et éteinte, apparaissait et disparaissait, donc j'avais besoin de créer un div vide avec des tailles fixes. 

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

fait l'affaire pour moi

Deathfry
la source
-1

Vous ajoutez au CSS de cette DIV position: relative, il fera tout le travail.

Krzysztof AN
la source