it-swarm.com.de

Wie kann ein DIV ohne Inhalt eine Breite haben?

Ich versuche, einem DIV eine Breite hinzuzufügen, aber ich scheine in ein Problem zu geraten, weil es keinen Inhalt hat .. Hier ist die CSS und HTML, die 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>

92
runeveryday

ein Div benötigt normalerweise mindestens einen Leerraum (& nbsp;), um eine Breite zu haben.

136
jcomeau_ictx

Verwenden Sie entweder padding, height oder &nbsp für die Breite, um mit leeren div zu wirken.

BEARBEITEN:

Nicht null min-height funktioniert auch hervorragend 

81
ArK

Verwenden Sie min-height: 1px; Alles hat mindestens eine Mindesthöhe von 1 Pixel, sodass kein zusätzlicher Speicherplatz mit nbsp oder padding belegt wird oder die Höhe zuerst ermittelt werden muss.

60
riley

Verwenden Sie CSS, um Ihrem div einen Leerraum mit Nullbreite hinzuzufügen. Der Inhalt des Divs nimmt keinen Platz ein, zwingt das Div jedoch zur Anzeige

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

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

9
Michael

Es gibt verschiedene Methoden, um das leere DIV mit float: left oder float: right sichtbar zu machen.

Hier präsentiert die, die ich kenne:

  • width (oder min-width) mit height (oder min-height) setzen
  • oder padding-top setzen
  • oder padding-bottom setzen
  • oder border-top setzen
  • oder border-bottom setzen
  • oder benutze Pseudo-Elemente : ::before oder ::after mit:
    • {content: "\200B";} 
    • oder {content: "."; visibility: hidden;}
  • oder &nbsp; in DIV einfügen (dies kann manchmal unerwartete Auswirkungen haben, zB in Kombination mit text-decoration: underline;)
5
simhumileco

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

1
DevenX

Sie fügen diesem DIVs CSS position: relative hinzu, es erledigt die ganze Arbeit.

0
Krzysztof AN

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

0
Daniel Forrest

Zu spät um zu antworten, aber trotzdem.

Bei der Verwendung von CSS muss die Eigenschaft min-height zum Formatieren des div (content-less) auf "n" px gesetzt werden, um das div sichtbar zu machen (funktioniert mit Webkits und Chrome, obwohl nicht sicher ist, ob dieser Trick bei IE6 und funktioniert niedriger)

Code:

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

0