Jak sprawić, by element DIV bez treści miał szerokość?

110

Próbuję dodać szerokość do a div, ale wydaje mi się, że mam problem, ponieważ nie ma treści.

Oto CSS i HTML, które mam do tej pory, ale nie działa:

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 runeveryday
źródło

Odpowiedzi:

158

element div zwykle wymaga co najmniej nierozdzielającej spacji (& nbsp;), aby mieć szerokość.

jcomeau_ictx
źródło
28
użyj „display: inline-block”
Luccas
dobre rozwiązanie, jeśli użyję „” zamiast & nbsp; to nie działa. ale dlaczego?
Amitābha
1
„& nbsp;” jest dobrą techniką w przeciwieństwie do minimalnej wysokości, ponieważ nie wymusza wysokości. Powiedzmy, że rozmiar czcionki jest ustawiony na 16 pikseli, a wypełnienie na 15 pikseli. Twój div zachowa taką samą wysokość przed i po tekst jest dodawany do div (zakładając, że to wszystko w jednej linii)
eroedig
dla mnie wstawianie spacji nie działa! element div o szerokości 100 pikseli i wewnątrz & nbsp; nie wygląda na 100px w div z elementami flex inline
Micky
89

Albo stosowanie padding, heightlub &nbsp do szerokości zaczęły obowiązywać z pustydiv

EDYTOWAĆ:

Wartość niezerowa min-heightrównież działa świetnie

Arka
źródło
5
Wolę rozwiązanie wypełnienia, każde wypełnienie większe niż 0 będzie działać. W ten sposób nie masz dziwnego, wybieralnego &nbsp;w div.
Brian Duncan
1
Uwaga: w przypadku wyściółki należy zapewnić wyściółkę zarówno lewą / prawą, jak i górną / dolną, aby działała.
Govind Rai
62

Użyj min-height: 1px; Wszystko ma co najmniej minimalną wysokość 1 piksela, więc żadne dodatkowe miejsce nie jest zajmowane przez nbsp lub dopełnienie ani nie trzeba najpierw znać wysokości.

riley
źródło
2
Twoje rozwiązania wydają mi się najczystsze, ale próbowałem znaleźć przyczynę tego w specyfikacji CSS i nie mogę go nigdzie znaleźć, najbliższe, które znalazłem, jest CSS 2.1, 9.5 Floatstam, gdzie jest napisane Note: this means that floats with zero outer height or negative outer height do not shorten line boxes., ale mówi o polach liniowych, czyli o liniach w akapicie, ale nie o sąsiednich polach. Czy ktoś lepiej zna specyfikację CSS?
Jaime Hablutzel
To zadziałało najlepiej dla mnie. Wypróbowałem większość innych sugestii tutaj, z wyjątkiem & nbsp ;.
ayahuasca
28

Użyj CSS, aby dodać spację o zerowej szerokości do swojego elementu div. Zawartość div nie zajmie miejsca, ale wymusi wyświetlenie div

.test1::before{
   content: "\200B";
}
BernardV
źródło
9

Ma szerokość, ale nie ma zawartości ani wysokości. Dodaj atrybut wysokości do klasy test1.

Michael
źródło
7

Istnieją różne metody tworzenia pustego DIV z float: leftlub float: rightwidocznym.

Oto te, które znam:

  • ustaw width(lub min-width) z height(lub min-height)
  • lub ustaw padding-top
  • lub ustaw padding-bottom
  • lub ustaw border-top
  • lub ustaw border-bottom
  • lub użyj pseudoelementów : ::beforelub ::afterz:
    • {content: "\200B";}
    • lub {content: "."; visibility: hidden;}
  • lub umieścić &nbsp;w DIV (czasami może to przynieść nieoczekiwane efekty np. w połączeniu z text-decoration: underline;)
simhumileco
źródło
1

Spróbuj dodać display:block;do swojego testu 1

DevenX
źródło
1

Za późno na odpowiedź, ale mimo wszystko.

Podczas używania CSS, aby stylizować div (content-less), właściwość min-height musi być ustawiona na „n” px, aby element div był widoczny (działa z zestawami internetowymi i chrome, ale nie jestem pewien, czy ta sztuczka zadziała w IE6 i niższy)

Kod:

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

Bhaskar Pramanik
źródło
0

&#160;może załatwić sprawę; działa w dokumentach XSL

Daniel Forrest
źródło
0

Miałem ten sam problem. Chciałem, aby ikony pojawiały się po naciśnięciu przycisku, ale bez żadnego ruchu i przesuwania środowiska, tak jak żarówka: włączanie i wyłączanie, pojawiały się i znikały, więc musiałem utworzyć pusty element div o ustalonych rozmiarach. 

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

załatwił sprawę dla mnie

deathfry
źródło
-1

Dodasz do CSS tego DIV position: relative, wykona całą pracę.

Krzysztof AN
źródło