web-dev-qa-db-fra.com

Comment créer une DIV sans contenu avec une largeur?

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

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>

htmlcsswidthcss-float
92
runeveryday

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

136
jcomeau_ictx

Utilisez soit padding, height ou &nbsp pour que la largeur prenne effet avec div vide

MODIFIER:

min-height non nul fonctionne également très bien 

81
ArK

Utilisez min-height: 1px; Tout a au moins une hauteur minimale de 1 px, de sorte qu'aucun espace supplémentaire n'est utilisé avec nbsp ou remplissage, ou que vous soyez obligé de connaître la hauteur en premier.

60
riley

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

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

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

9
Michael

Il existe différentes méthodes pour rendre la DIV vide avec float: left ou float: right visible.

Voici ceux que je connais:

  • définir width (ou min-width) avec height (ou min-height)
  • ou définissez padding-top
  • ou définissez padding-bottom
  • ou définissez border-top
  • ou définissez border-bottom
  • ou utilisez pseudo-éléments : ::before ou ::after avec:
    • {content: "\200B";} 
    • ou {content: "."; visibility: hidden;}
  • ou mettez &nbsp; dans DIV (cela peut parfois entraîner des effets inattendus, par exemple en combinaison avec text-decoration: underline;)
5
simhumileco

Essayez d'ajouter display:block; à votre test1

1
DevenX

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

0
Krzysztof AN

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

0
Daniel Forrest

Trop tard pour répondre, mais quand même.

Lors de l’utilisation de CSS pour dénommer div (content-less), la propriété min-height doit être définie sur "n" px pour que la div soit visible (fonctionne avec les kits Web et chrome, sans savoir si cette astuce fonctionnera sous IE6 et inférieur)

Code:

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

0
Bhaskar Pramanik