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>

— runeveryday
źródło

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  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ć  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

 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