İçeriği olmayan bir div genişliği nasıl yapılır?

110

A'ya genişlik eklemeye çalışıyorum div, ancak içeriği olmadığı için bir sorunla karşılaşıyorum.

Şimdiye kadar sahip olduğum CSS ve HTML burada, ancak çalışmıyor:

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
kaynak

158

bir div, bir genişliğe sahip olmak için genellikle en azından bölünemez bir boşluğa (& nbsp;) ihtiyaç duyar.

— jcomeau_ictx
kaynak

28

"display: inline-block" kullanın

— Luccas

iyi çözüm, eğer & nbsp; yerine "" kullanırsam çalışmıyor. ama neden?

— Amitābha

1

'& nbsp;' minimum yüksekliğin aksine iyi bir tekniktir çünkü yüksekliği zorlamaz. Yazı tipi boyutunuzun 16 piksel olarak ayarlandığını ve dolgunuzun 15 piksel olduğunu varsayalım.

— Div'iniz metin div'e

bana göre boşluk koymak işe yaramıyor! genişliği 100px olan ve & nbsp; içindeki div esnek satır içi öğeler içeren bir div'de 100 piksel gibi görünmüyor

— Micky

89

Her iki kullanım padding, heightveya &nbsp genişlik için boş ile etkinleşmesidiv

DÜZENLE:

Sıfır olmayan min-heightda harika çalışıyor

— ArH
kaynak

5

Dolgu çözümünü tercih ederim, 0'dan büyük herhangi bir dolgu çalışacaktır. Böylece hiç bir garip, seçimli yok  içinde div.

— Brian Duncan

1

Lütfen not: dolgu çözüm için sol / sağ hem sağlamanız gerekir ve işe bunun için üst / alt dolgu.

— Govind Rai

62

min-height: 1px; Her Şeyi Kullan en az 1px yüksekliğe sahiptir, bu nedenle nbsp veya dolgu ile fazladan yer kaplanmaz veya önce yüksekliği bilmeye zorlanmaz.

— Riley
kaynak

2

Çözümleriniz bana en temiz görünüyor, ancak bunun nedenini CSS spesifikasyonunda bulmaya çalışıyorum ve hiçbir yerde bulamıyorum, bulduğum en yakın CSS 2.1, 9.5 Floatsyer, yazdığı yerde Note: this means that floats with zero outer height or negative outer height do not shorten line boxes., ancak satır kutularından yani satırlardan bahsediyor bir paragrafta, ancak bitişik kutularla ilgili değil. CSS spesifikasyonuna daha aşina olan var mı?

— Jaime Hablutzel

Bu benim için en iyisi oldu. Buradaki & nbsp; dışındaki diğer önerilerin çoğunu denedim.

— ayahuasca

28

Div'inize sıfır genişlikli boşluk eklemek için CSS kullanın. Div'in içeriği yer kaplamaz, ancak div'i görüntülenmeye zorlar

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

— BernardV
kaynak

9

Genişliği vardır ancak içeriği veya yüksekliği yoktur. Test1 sınıfına bir yükseklik özelliği ekleyin.

— Michael
kaynak

7

Boş DIV'yi ile float: leftveya float: rightgörünür hale getirmenin farklı yöntemleri vardır .

İşte bildiklerimi sunar:

grubu width(ya da min-widthbirlikte) height(ya da min-height)
veya ayarla padding-top
veya ayarla padding-bottom
veya ayarla border-top
veya ayarla border-bottom
veya sözde öğeleri kullanın : ::beforeveya ::afterile:
- {content: "\200B";}
- veya {content: "."; visibility: hidden;}
veya DIV'nin  içine koyun (bu bazen beklenmedik etkilere yol açabilir, örn. ile kombinasyon halinde text-decoration: underline;)

— simhumileco
kaynak

1

display:block;Testinize eklemeyi deneyin1

— DevenX
kaynak

1

Cevap vermek için çok geç ama yine de.

CSS kullanırken, div stilini (içeriksiz) biçimlendirmek için minimum yükseklik özelliği, div'i görünür kılmak için "n" px olarak ayarlanmalıdır (webkit'ler ve chrome ile çalışır, ancak bu numaranın IE6 ve alt)

Kod:

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

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

Snippet'i genişlet

— Bhaskar Pramanik
kaynak

0

 hile yapabilir; XSL belgelerinde çalışır

— Daniel Forrest
kaynak

0

Ben de aynı sorunu yaşadım. Simgelerin düğmeye basarak ama herhangi bir hareket yapmadan ve ortamı kaydırarak görünmesini istedim, tıpkı ampul gibi: açık ve kapalı, belirdi ve kayboldu, bu yüzden sabit boyutlarda boş bir div yapmam gerekiyordu.

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

benim için hile yaptı

— deathfry
kaynak

-1

Bu DIV'nin CSS'sine eklerseniz position: relative, tüm işi yapacaktır.

— Krzysztof AN
kaynak