Comment faire un DIV avec pas de contenu ont une largeur?

Je suis en train d'ajouter une largeur d'un DIV, mais je semble avoir un problème parce qu'il n'a pas de contenu.
Voici le CSS et le HTML j'ai jusqu'à présent, mais ça 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>

Ce n'est pas une question.
Mettre votre code html et besoin de quelques éclaircissements
désolé,je ne sais pas comment faire pour que mon code html peut afficher.
copier et coller et de le rendre aussi "code". bouton à côté de devis
c'est ok, il faut ajouter de l'espace à l'avant de mon code.

InformationsquelleAutor runeveryday | 2010-11-13

138

un div généralement besoin d'au moins un espace insécable ( ) afin d'avoir une largeur.
- Ou une hauteur....
- puting un   est un bon truc!
- Aucun de ceux qui l'ont fait pour moi sans float:left.
- utilisez "display:inline-block"
- min-height était la meilleure solution pour moi. - Je garder ma hauteur automatique et encore réussi à le faire fonctionner dans un "vide" div
- la bonne solution,si j'utilise "" au lieu de   il ne fonctionne pas.mais pourquoi?
- Mettre la hauteur de la propriété de ne pas faire quelque chose de bon pour moi. J'ai mis un rembourrage au lieu de cela, plutôt que de   qui comprend un espace.
- +1 @Luccas, n'avait aucune idée de qui a fonctionné... mais il ne fait pour moi. Dans google Chrome, au moins. Merci! @MichelAyres, malheureusement min-height ne fonctionne pas pour moi, sans doute parce que mon <div> utilisé display: inline (que je ne pouvais pas l'éviter).
- ' ' est une bonne technique, par opposition à min-height parce qu'il ne force pas a la hauteur. Dire votre taille de police est fixé à 16px et votre rembourrage est 15px. Votre div conserver la même hauteur avant et après l'ajout de texte à la div (en supposant que c'est sur une seule ligne)
- min-height: 1px; est le tour est joué
- pour moi, mettre un espace ne fonctionne pas! la div avec une largeur de 100px et dans les   ne ressemble pas à être 100px dans un div avec flex éléments en ligne
InformationsquelleAutor jcomeau_ictx
82

Utiliser padding , height ou &nbsp pour la largeur de prendre effet avec vide div

EDIT:

Non nul min-height travaille aussi grande
- Mettre un   dans votre div vide. Vous pouvez aussi essayer de le min-width.
- Je préfère le rembourrage de la solution, tout rembourrage supérieur à 0 fonctionne. De cette façon, vous n'avez pas bizarre, sélectionnable   dans le div.
- hauteur était tout ce qui manquait. Je suis content de ne pas avoir à ajouter du contenu à elle, comme il ne serait pas logique.
- Veuillez noter: pour le rembourrage solution dont vous avez besoin pour fournir à la fois à gauche/droite et haut/bas rembourrage pour que cela fonctionne.
- IMO c'est la meilleure réponse.
InformationsquelleAutor ArK
61

Utilisation min-height: 1px; Tout a au moins min-hauteur de 1px donc pas de supplément d'espace est pris avec nbsp ni rembourrage, ou d'être obligés de connaître la hauteur de la première.
- Vos solutions semble le plus propre à moi, mais j'ai essayé de trouver la raison dans le CSS et je ne peux pas le trouver n'importe où, le plus proche que j'ai trouvé est dans CSS 2.1, 9.5 Floats où il est dit Note: this means that floats with zero outer height or negative outer height do not shorten line boxes., mais il parle à propos de la ligne de boîtes à savoir les lignes dans un paragraphe, mais pas sur les cases. Quelqu'un de plus familier avec le CSS?
- Cela a fonctionné le mieux pour moi. J'ai essayé la plupart des autres suggestions ici à l'exception de  .
InformationsquelleAutor riley
27

Utiliser les CSS pour ajouter un zéro-largeur de l'espace à votre div. Le contenu de la div prendra pas de place mais la force de la div pour afficher
```
.test1::before{
   content: "0B";
}
```
- Vous, Monsieur, méritent un cookie.   n'a pas fonctionné pour moi, comme je l'ai eu pour générer les divs du contenu à partir d'un module python et aurait dû échapper correctement. Par conséquent, l'homme thx.
- Je l'aime plus, est plus propre.
- Nettoyant! Merci
InformationsquelleAutor BernardV
9

Il a la largeur, mais pas de contenu ou de la hauteur. Ajouter un attribut hauteur de la classe test1.

InformationsquelleAutor Michael
6

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

Ici présente celles que je connais:
- ensemble width(ou min-width) avec height (ou min-height)
- ou un ensemble padding-top
- ou un ensemble padding-bottom
- ou un ensemble border-top
- ou un ensemble border-bottom
- ou de l'utilisation pseudo-éléments: ::before ou ::after avec:
  - {content: "\200B";}
  - ou {content: "."; visibility: hidden;}
- ou mettre   à l'intérieur de la DIV (parfois, cela peut apporter des effets inattendus, par exemple. en combinaison avec text-decoration: underline;)
InformationsquelleAutor simhumileco
1

Essayez d'ajouter display:block; à votre test1

InformationsquelleAutor DevenX
1

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

Tout en utilisant le CSS, le style de la div de contenu (moins), le min-height de la propriété doit être défini sur "n"px pour faire de la div visible (fonctionne avec webkits et de chrome, tandis que vous ne savez pas si cette astuce fonctionnera sur IE6 et inférieur)

Code:

CSS:
```
.shape-round{
  width: 40px;
  min-height: 40px;
  background: #FF0000;
  border-radius: 50%;
}
```
HTML:
```
<div class="shape-round"></div>
```
InformationsquelleAutor Bhaskar Pramanik
0

  peut faire l'affaire, travaille dans XSL docs

InformationsquelleAutor Daniel Forrest
0

Vous ajoutez à cela DIV CSS position: relative, il fera tout le travail.

InformationsquelleAutor Krzysztof AN

Vous devez vous connecter pour publier un commentaire.