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>

— runeveryday
sumber

158

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

— jcomeau_ictx
sumber

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

— Tabut
sumber

5

Saya lebih suka solusi padding, padding yang lebih besar dari 0 akan berfungsi. Dengan begitu Anda tidak memiliki yang aneh, dapat dipilih  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.

— riley
sumber

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";
}

— BernardV
sumber

9

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

— Michael
sumber

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  dalam DIV (ini terkadang dapat membawa efek yang tidak diharapkan, misalnya dalam kombinasi dengan text-decoration: underline;)

— simhumileco.dll
sumber

1

Coba tambahkan display:block;ke test1 Anda

— DevenX
sumber

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>

Luaskan cuplikan

— Bhaskar Pramanik
sumber

0

 bisa melakukan triknya; bekerja di dokumen XSL

— Daniel Forrest
sumber

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

— kematian
sumber

-1

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

— Krzysztof AN
sumber