¿Cómo hacer que un div sin contenido tenga ancho?

110

Estoy tratando de agregar un ancho a a div, pero parece que tengo un problema porque no tiene contenido.

Aquí está el CSS y HTML que tengo hasta ahora, pero no funciona:

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 corre todos los días
fuente

Respuestas:

158

un div generalmente necesita al menos un espacio que no se rompa (& nbsp;) para tener un ancho.

jcomeau_ictx
fuente
28
use "display: inline-block"
Luccas
buena solución, si utilizo "" en lugar de & nbsp; no funciona. pero ¿por qué?
Amitābha
1
'& nbsp;' es una buena técnica en contraposición a la altura mínima porque no fuerza una altura. Supongamos que su tamaño de fuente está establecido en 16 px y su relleno es de 15 px. Su div conservará la misma altura antes y después de que se agregue el texto al div (suponiendo que esté todo en una línea)
eroedig
para mí, poner un espacio no funciona! el div con un ancho de 100 px y dentro de & nbsp; no parece ser 100px en un div con elementos flexibles en línea
Micky
89

Cualquiera de uso padding, heighto &nbsp para la anchura para tener efecto con vacíodiv

EDITAR:

No cero min-heighttambién funciona muy bien

Arca
fuente
5
Prefiero la solución de relleno, cualquier relleno superior a 0 funcionará. De esa manera, no tendrá un extraño, seleccionable &nbsp;en el div.
Brian Duncan
1
Tenga en cuenta: para la solución de acolchado, debe proporcionar acolchado izquierdo / derecho y superior / inferior para que funcione.
Govind Rai
62

Use min-height: 1px; Everything tiene al menos una altura mínima de 1px, por lo que no se ocupa espacio adicional con nbsp o padding, ni se ve obligado a conocer la altura primero.

riley
fuente
2
Sus soluciones me parecen las más limpias, pero he estado tratando de encontrar el motivo de esto en la especificación de CSS y no puedo encontrarlo en ningún lugar, lo más cercano que encontré es CSS 2.1, 9.5 Floatsdonde dice Note: this means that floats with zero outer height or negative outer height do not shorten line boxes., pero habla de cuadros de línea, es decir, líneas en un párrafo, pero no en cuadros adyacentes. ¿Alguien más familiarizado con las especificaciones CSS?
Jaime Hablutzel
Esto funcionó mejor para mí. Probé la mayoría de las otras sugerencias aquí excepto & nbsp ;.
ayahuasca
28

Use CSS para agregar un espacio de ancho cero a su div. El contenido del div no ocupará espacio pero obligará al div a mostrarse

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

Tiene ancho pero sin contenido ni alto. Agregue un atributo de altura a la clase test1.

Miguel
fuente
7

Existen diferentes métodos para hacer visible el DIV vacío con float: lefto float: right.

Aquí presenta los que conozco:

  • establecer width(o min-width) con height(o min-height)
  • o establecer padding-top
  • o establecer padding-bottom
  • o establecer border-top
  • o establecer border-bottom
  • o use pseudo-elementos : ::beforeo ::aftercon:
    • {content: "\200B";}
    • o {content: "."; visibility: hidden;}
  • o poner &nbsp;dentro de DIV (esto a veces puede traer efectos inesperados, por ejemplo en combinación con text-decoration: underline;)
simhumileco
fuente
1

Intenta agregar display:block;a tu prueba1

DevenX
fuente
1

Demasiado tarde para responder, pero aun así.

Al usar CSS, para diseñar el div (sin contenido), la propiedad min-height debe establecerse en "n" px para hacer que el div sea visible (funciona con webkits y chrome, aunque no estoy seguro de si este truco funcionará en IE6 y inferior)

Código:

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

Bhaskar Pramanik
fuente
0

&#160;puede hacer el truco; funciona en documentos XSL

Daniel Forrest
fuente
0

Tuve el mismo problema. Quería que los íconos aparecieran presionando el botón pero sin ningún movimiento y deslizándose por el entorno, como una bombilla: encendido y apagado, aparecían y desaparecían, por lo que necesitaba hacer un div vacío con tamaños fijos. 

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

me hizo el truco

Deathfry
fuente
-1

Si agrega al CSS de este DIV position: relative, hará todo el trabajo.

Krzysztof AN
fuente