Wie kann man ein Div ohne Inhalt breit machen?

110

Ich versuche, a eine Breite hinzuzufügen div, aber ich scheine auf ein Problem zu stoßen, weil es keinen Inhalt hat.

Hier ist das CSS und HTML, das ich bisher habe, aber es funktioniert nicht:

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 jeden Tag laufen
quelle

Antworten:

158

Ein Div benötigt normalerweise mindestens ein nicht unterbrechendes Leerzeichen (& nbsp;), um eine Breite zu haben.

jcomeau_ictx
quelle
28
benutze "display: inline-block"
Luccas
gute Lösung, wenn ich "" anstelle von & nbsp; es funktioniert nicht. Aber warum?
Amitābha
1
'& nbsp;' ist eine gute Technik im Gegensatz zu Min-Höhe, da sie keine Höhe erzwingt. Angenommen, Ihre Schriftgröße ist auf 16 Pixel und Ihre Polsterung auf 15 Pixel eingestellt. Ihr Div behält die gleiche Höhe vor und nach dem Hinzufügen von Text zum Div (vorausgesetzt, es ist alles in einer Zeile)
eroedig
Ein Leerzeichen zu setzen funktioniert für mich nicht! das div mit einer Breite von 100px und innerhalb von & nbsp; sieht nicht so aus, als wäre man 100px in einem Div mit flexiblen Inline-Elementen
Micky
89

Entweder verwenden padding, heightoder &nbsp für Breite wirksam mit leerendiv

BEARBEITEN:

Nicht Null min-heightfunktioniert auch hervorragend

Arche
quelle
5
Ich bevorzuge die Polsterlösung, jede Polsterung größer als 0 funktioniert. Auf diese Weise haben Sie keine seltsame, wählbare &nbsp;in der div.
Brian Duncan
1
Bitte beachten Sie: Für die Polsterlösung müssen Sie sowohl die linke / rechte als auch die obere / untere Polsterung bereitstellen, damit sie funktioniert.
Govind Rai
62

Verwendung min-height: 1px; Alles hat eine Mindesthöhe von 1 Pixel, sodass kein zusätzlicher Platz mit nbsp oder Polsterung beansprucht wird oder die Höhe zuerst ermittelt werden muss.

Riley
quelle
2
Ihre Lösungen scheinen mir am saubersten zu sein, aber ich habe versucht, den Grund dafür in der CSS-Spezifikation zu finden, und ich kann sie nirgendwo finden. Die nächste, die ich gefunden habe, befindet sich dort, CSS 2.1, 9.5 Floatswo sie steht Note: this means that floats with zero outer height or negative outer height do not shorten line boxes., aber es handelt sich um Zeilenfelder, dh Zeilen in einem Absatz, aber nicht über benachbarte Kästchen. Kennt jemand die CSS-Spezifikation besser?
Jaime Hablutzel
Das hat bei mir am besten funktioniert. Ich habe die meisten anderen Vorschläge hier ausprobiert, außer & nbsp;.
Ayahuasca
28

Verwenden Sie CSS, um Ihrem Div einen Raum mit einer Breite von Null hinzuzufügen. Der Inhalt des Div nimmt keinen Platz ein, erzwingt jedoch die Anzeige des Div

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

Es hat Breite, aber keinen Inhalt oder Höhe. Fügen Sie der Klasse test1 ein height-Attribut hinzu.

Michael
quelle
7

Es gibt verschiedene Methoden, um den leeren DIV mit float: leftoder float: rightsichtbar zu machen.

Hier präsentiert die, die ich kenne:

  • setze width(oder min-width) mit height(oder min-height)
  • oder einstellen padding-top
  • oder einstellen padding-bottom
  • oder einstellen border-top
  • oder einstellen border-bottom
  • oder benutze Pseudo-Elemente : ::beforeoder ::aftermit:
    • {content: "\200B";}
    • oder {content: "."; visibility: hidden;}
  • oder &nbsp;in DIV einfügen (dies kann manchmal zu unerwarteten Effekten führen, z. B. in Kombination mit text-decoration: underline;)
simhumileco
quelle
1

Versuchen Sie display:block;, Ihrem Test1 hinzuzufügen

DevenX
quelle
1

Zu spät, um zu antworten, aber trotzdem.

Wenn Sie CSS verwenden, um das div (inhaltslos) zu formatieren, muss die Eigenschaft min-height auf "n" px gesetzt werden, um das div sichtbar zu machen (funktioniert mit Webkits und Chrome, ist sich jedoch nicht sicher, ob dieser Trick unter IE6 und funktioniert) niedriger)

Code:

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

Bhaskar Pramanik
quelle
0

&#160;kann den Trick tun; funktioniert in XSL-Dokumenten

Daniel Forrest
quelle
0

Ich hatte das gleiche Problem. Ich wollte, dass Symbole durch Drücken der Taste angezeigt werden, aber ohne Bewegung und Verschieben der Umgebung, genau wie bei der Glühbirne: Ein und Aus, erschien und verschwand, also musste ich ein leeres Div mit festen Größen erstellen. 

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

hat den Trick für mich gemacht

Deathfry
quelle
-1

Wenn Sie dem CSS dieses DIV hinzufügen, erledigt position: relativees die ganze Arbeit.

Krzysztof AN
quelle