Bagaimana cara membuat div tanpa konten memiliki lebar?


110

Saya mencoba menambahkan lebar ke a div, tapi sepertinya saya mengalami masalah karena tidak ada isinya.

Berikut ini CSS dan HTML yang saya miliki sejauh ini, tetapi tidak berfungsi:

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>

Jawaban:


158

div biasanya membutuhkan setidaknya spasi non-breaking (& nbsp;) untuk memiliki lebar.


28
gunakan "display: inline-block"
Luccas

solusi yang baik, jika saya menggunakan "", bukan & nbsp; itu tidak berhasil. tapi kenapa?
Amitābha

1
'& nbsp;' adalah teknik yang baik dibandingkan dengan min-height karena tidak memaksakan ketinggian. Katakanlah ukuran font Anda disetel ke 16px dan padding Anda adalah 15px. Div Anda akan mempertahankan tinggi yang sama sebelum dan sesudah teks ditambahkan ke div (dengan asumsi semuanya dalam satu baris)
eroedig

bagi saya, memberi spasi tidak berhasil! div dengan lebar 100 piksel dan dalam & nbsp; tidak terlihat seperti 100px dalam div dengan elemen inline flex
Micky

89

Baik digunakan padding, heightatau &nbsp agar lebar diterapkan dengan kosongdiv

EDIT:

Bukan nol min-heightjuga berfungsi dengan baik


5
Saya lebih suka solusi padding, padding yang lebih besar dari 0 akan berfungsi. Dengan begitu Anda tidak memiliki yang aneh, dapat dipilih &nbsp;di div.
Brian Duncan

1
Harap diperhatikan: untuk solusi padding, Anda perlu menyediakan padding kiri / kanan dan atas / bawah agar dapat berfungsi.
Govind Rai

62

Gunakan min-height: 1px; Semuanya setidaknya memiliki tinggi minimal 1 piksel sehingga tidak ada ruang tambahan yang diambil dengan nbsp atau padding, atau dipaksa untuk mengetahui tingginya terlebih dahulu.


2
Solusi Anda tampaknya paling bersih bagi saya, tetapi saya telah mencoba menemukan alasan untuk ini di spesifikasi CSS dan saya tidak dapat menemukannya di mana pun, yang terdekat yang saya temukan adalah di CSS 2.1, 9.5 Floatstempat yang tertulis Note: this means that floats with zero outer height or negative outer height do not shorten line boxes., tetapi berbicara tentang kotak baris yaitu baris dalam sebuah paragraf, tetapi tidak tentang kotak yang berdekatan. Adakah yang lebih familiar dengan spesifikasi CSS?
Jaime Hablutzel

Ini bekerja paling baik untuk saya. Saya mencoba sebagian besar saran lain di sini kecuali & nbsp ;.
ayahuasca

28

Gunakan CSS untuk menambahkan spasi lebar-nol ke div Anda. Konten div tidak akan memakan tempat tetapi akan memaksa div untuk ditampilkan

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

9

Ini memiliki lebar tetapi tidak ada konten atau tinggi. Tambahkan atribut height ke kelas test1.


7

Ada beberapa metode berbeda untuk membuat DIV kosong dengan float: leftatau float: rightterlihat.

Di sini menyajikan yang saya tahu:

  • set width(atau min-width) dengan height(atau min-height)
  • atau set padding-top
  • atau set padding-bottom
  • atau set border-top
  • atau set border-bottom
  • atau gunakan elemen semu : ::beforeatau ::afterdengan:
    • {content: "\200B";}
    • atau {content: "."; visibility: hidden;}
  • atau dimasukkan ke &nbsp;dalam DIV (ini terkadang dapat membawa efek yang tidak diharapkan, misalnya dalam kombinasi dengan text-decoration: underline;)


1

Namun demikian, terlambat untuk menjawab.

Saat menggunakan CSS, untuk memberi gaya pada div (tanpa konten), properti min-height harus disetel ke "n" px agar div terlihat (berfungsi dengan webkit dan chrome, sementara tidak yakin apakah trik ini akan berfungsi di IE6 dan menurunkan)

Kode:

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



0

Saya memiliki masalah yang sama. Saya ingin ikon muncul dengan menekan tombol tetapi tanpa gerakan apa pun dan menggeser lingkungan, seperti bohlam: hidup dan mati, muncul dan menghilang, jadi saya perlu membuat div kosong dengan ukuran tetap.

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

melakukan trik untuk saya


-1

Anda menambahkan ke CSS DIV ini position: relative, itu akan melakukan semua pekerjaan.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.