Come fare in modo che un div senza contenuto abbia una larghezza?

110

Sto cercando di aggiungere una larghezza a a div, ma sembra che si verifichi un problema perché non ha contenuto.

Ecco il CSS e l'HTML che ho finora, ma non funziona:

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>

— runeveryday
fonte

158

un div di solito ha bisogno di almeno uno spazio unificatore (& nbsp;) per avere una larghezza.

— jcomeau_ictx
fonte

28

usa "display: inline-block"

— Luccas

buona soluzione, se utilizzo "" invece di & nbsp; non funziona, ma perché?

— Amitābha

1

'& nbsp;' è una buona tecnica al contrario di min-height perché non forza un'altezza. Supponiamo che la dimensione del tuo carattere sia impostata su 16px e il tuo riempimento sia 15px. Il tuo div manterrà la stessa altezza prima e dopo che il testo viene aggiunto al div (supponendo che sia tutto su una riga)

— eroedig

per me, mettere uno spazio non funziona! il div con larghezza 100 px e all'interno di & nbsp; non sembra essere 100px in un div con elementi flessibili in linea

— Micky

89

Usa padding, heighto &nbsp affinché la larghezza abbia effetto con vuotodiv

MODIFICARE:

Anche Non zero min-heightfunziona alla grande

— Arca
fonte

5

Preferisco la soluzione di riempimento, qualsiasi riempimento maggiore di 0 funzionerà. In questo modo non hai uno strano, selezionabile  in div.

— Brian Duncan

1

Nota: per la soluzione di imbottitura è necessario fornire un'imbottitura sinistra / destra e superiore / inferiore affinché funzioni.

— Govind Rai

62

Usa min-height: 1px; Tutto ha almeno un'altezza minima di 1px, quindi nessuno spazio aggiuntivo viene occupato con nbsp o padding, o sei costretto a conoscere prima l'altezza.

— Riley
fonte

2

Le tue soluzioni mi sembrano le più pulite, ma ho cercato di trovare la ragione di ciò nelle specifiche CSS e non riesco a trovarlo da nessuna parte, il più vicino che ho trovato è CSS 2.1, 9.5 Floatsdove dice Note: this means that floats with zero outer height or negative outer height do not shorten line boxes., ma parla di riquadri di riga cioè linee in un paragrafo, ma non sui riquadri adiacenti. Qualcuno ha più familiarità con le specifiche CSS?

— Jaime Hablutzel

Questo ha funzionato al meglio per me. Ho provato la maggior parte degli altri suggerimenti qui, tranne & nbsp ;.

— ayahuasca

28

Usa CSS per aggiungere uno spazio di larghezza zero al tuo div. Il contenuto del div non occuperà spazio ma forzerà la visualizzazione del div

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

— BernardV
fonte

9

Ha larghezza ma nessun contenuto o altezza. Aggiungi un attributo di altezza alla classe test1.

— Michael
fonte

7

Esistono diversi metodi per rendere visibile float: lefto il DIV vuoto float: right.

Ecco quelli che conosco:

impostare width(o min-width) con height(o min-height)
o impostare padding-top
o impostare padding-bottom
o impostare border-top
o impostare border-bottom
o usa pseudo-elementi : ::beforeo ::aftercon:
- {content: "\200B";}
- o {content: "."; visibility: hidden;}
o inserire  all'interno DIV (questo a volte può portare effetti inaspettati ad es. in combinazione con text-decoration: underline;)

— simhumileco
fonte

1

Prova ad aggiungere display:block;al tuo test1

— DevenX
fonte

1

Troppo tardi per rispondere, ma comunque.

Durante l'utilizzo dei CSS, per definire lo stile del div (senza contenuto), la proprietà min-height deve essere impostata su "n" px per rendere visibile il div (funziona con webkit e chrome, anche se non sono sicuro che questo trucco funzionerà su IE6 e inferiore)

Codice:

.shape-round{
  width: 40px;
  min-height: 40px;
  background: #FF0000;
  border-radius: 50%;
}

<div class="shape-round"></div>

Espandi lo snippet

— Bhaskar Pramanik
fonte

0

 può fare il trucco; funziona nei documenti XSL

— Daniel Forrest
fonte

0

Ho avuto lo stesso problema. Volevo che le icone apparissero premendo il pulsante ma senza alcun movimento e facendo scorrere l'ambiente, proprio come una lampadina: si accende e si spegne, appariva e scompariva, quindi dovevo creare un div vuoto con dimensioni fisse.

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

ha fatto il trucco per me

— deathfry
fonte

-1

Se aggiungi al CSS di questo DIV position: relative, farà tutto il lavoro.

— Krzysztof AN
fonte