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>

— rune tous les jours
source

158

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

— jcomeau_ictx
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
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  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
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
source

9

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

— Michael
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  dans DIV (cela peut parfois apporter des effets inattendus, par exemple en combinaison avec text-decoration: underline;)

— simhumileco
source

1

Essayez d'ajouter display:block;à votre test1

— DevenX
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
source

0

 peut faire l'affaire; fonctionne dans les documents XSL

— Daniel Forrest
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
source

-1

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

— Krzysztof AN
source