Blok tampilan tanpa lebar 100%

Question 1

Saya ingin menyetel elemen span agar muncul di bawah elemen lain menggunakan properti display. Saya mencoba menerapkan inline-block tetapi tidak berhasil, dan menemukan saya dapat menggunakan blok jika saya entah bagaimana berhasil menghindari memberikan elemen dengan lebar 100% (saya tidak ingin elemen untuk "meregang"). Bisakah ini dilakukan, atau jika tidak, praksis apa yang baik untuk menyelesaikan masalah semacam ini?

Contoh: daftar berita di mana saya ingin menyetel tautan "baca lebih lanjut" di akhir setiap pos (catatan: <a>bukan <span>)

<li>
<span class="date">11/15/2012</span>
<span class="title">Lorem ipsum dolor</span>
<a class="read-more">Read more</a> 
</li>

Pembaruan: Terselesaikan. Di CSS, terapkan

li {
    clear: both;
}
li a {
    display: block;
    float: left;
    clear: both;
}

Question 2

Jika saya memahami pertanyaan Anda dengan benar, CSS berikut akan mengapungkan a Anda di bawah span dan menjaganya agar tidak memiliki lebar 100%:

a {
    display: block; 
    float: left; 
    clear: left; 
}

Question 3

Gunakan display: table.

Jawaban ini minimal harus 30 karakter; Saya memasuki usia 20, jadi ini beberapa lagi.

Question 4

kamu bisa memakai:

width: max-content;

Catatan: dukungan terbatas, periksa di sini untuk perincian lengkap tentang browser pendukung

Question 5

Saya akan menyimpan setiap baris ke divnya sendiri, jadi ...

<div class="row">
    <div class="cell">Content</div>
</div>
<div class="row">
    <div class="cell">Content</div>
</div>

Dan kemudian untuk CSS:

.cell{display:inline-block}

Sulit untuk memberikan solusi tanpa melihat kode asli Anda.

Question 6

Sekali lagi: jawaban yang mungkin sedikit terlambat (tetapi bagi mereka yang menemukan halaman ini untuk jawabannya).

Alih-alih display:block;digunakandisplay:inline-block;

Question 7

Coba ini:

li a {
    width: 0px;
    white-space:nowrap;
}

Question 8

Anda dapat menggunakan berikut ini:

display: inline-block;

Bekerja dengan baik pada tautan dan elemen lainnya.

Question 9

Saya memiliki masalah ini, saya menyelesaikannya seperti ini:

.parent {
  white-space: nowrap;
  display: table;
}

.child {
  display: block;
}

"white-space: nowrap" memastikan bahwa anak-anak dari anak tersebut (jika ada) tidak bergabung ke baris baru jika tidak ada cukup ruang.

tanpa "ruang putih: nowrap":

dengan "white-space: nowrap":

sunting: tampaknya itu juga hanya berfungsi tanpa bagian blok anak untuk saya, jadi sepertinya ini berfungsi dengan baik.

.parent {
  white-space: nowrap;
  display: table;
}

Answer 1

98

Saya ingin menyetel elemen span agar muncul di bawah elemen lain menggunakan properti display. Saya mencoba menerapkan inline-block tetapi tidak berhasil, dan menemukan saya dapat menggunakan blok jika saya entah bagaimana berhasil menghindari memberikan elemen dengan lebar 100% (saya tidak ingin elemen untuk "meregang"). Bisakah ini dilakukan, atau jika tidak, praksis apa yang baik untuk menyelesaikan masalah semacam ini?

Contoh: daftar berita di mana saya ingin menyetel tautan "baca lebih lanjut" di akhir setiap pos (catatan: <a>bukan <span>)

<li>
<span class="date">11/15/2012</span>
<span class="title">Lorem ipsum dolor</span>
<a class="read-more">Read more</a> 
</li>

Pembaruan: Terselesaikan. Di CSS, terapkan

li {
    clear: both;
}
li a {
    display: block;
    float: left;
    clear: both;
}

html width block css Staffan Estberg
sumber

1

Apakah Anda punya markup (HTML atau CSS) untuk ditunjukkan kepada kami? Sulit untuk mengerjakan masalah tanpa sesuatu untuk dikerjakan. Juga demo di jsfiddle akan bagus.

Tom Oakley

Pikir saya tidak memerlukan kode sampel karena ini hanya tentang memposisikan elemen span. Lihat postingan yang diperbarui.

Staffan Estberg

Anda dapat secara serius mengurangi semua markup itu hanya dengan menggunakan satu baris kode seperti yang saya sebutkan di bawah ini.

ha404

Answer 2

1

Apakah Anda punya markup (HTML atau CSS) untuk ditunjukkan kepada kami? Sulit untuk mengerjakan masalah tanpa sesuatu untuk dikerjakan. Juga demo di jsfiddle akan bagus.

Tom Oakley

Answer 3

Pikir saya tidak memerlukan kode sampel karena ini hanya tentang memposisikan elemen span. Lihat postingan yang diperbarui.

Staffan Estberg

Answer 4

Anda dapat secara serius mengurangi semua markup itu hanya dengan menggunakan satu baris kode seperti yang saya sebutkan di bawah ini.

ha404

Answer 5

75

Jika saya memahami pertanyaan Anda dengan benar, CSS berikut akan mengapungkan a Anda di bawah span dan menjaganya agar tidak memiliki lebar 100%:

a {
    display: block; 
    float: left; 
    clear: left; 
}

PJ McCormick
sumber

Saya mencoba menerapkan ini tetapi karena elemen span (judul dan tanggal, dalam contoh) tidak mengapung, tautan diposisikan sebelum rentang terakhir. Kira satu solusinya adalah membuat semua elemen anak di li mengambang.

Staffan Estberg

Ini berfungsi jika saya menerapkan clearfix untuk li orang tua. Akan pergi dengan solusi ini, terima kasih PJ.

Staffan Estberg

Answer 6

Saya mencoba menerapkan ini tetapi karena elemen span (judul dan tanggal, dalam contoh) tidak mengapung, tautan diposisikan sebelum rentang terakhir. Kira satu solusinya adalah membuat semua elemen anak di li mengambang.

Staffan Estberg

Answer 7

Ini berfungsi jika saya menerapkan clearfix untuk li orang tua. Akan pergi dengan solusi ini, terima kasih PJ.

Staffan Estberg

Answer 8

158

Gunakan display: table.

Jawaban ini minimal harus 30 karakter; Saya memasuki usia 20, jadi ini beberapa lagi.

ha404
sumber

13

Solusi jenius. margin: 0 auto;jika Anda membutuhkannya di tengah.

Mafia

4

Saya pikir Anda luar biasa.

billynoah

1

display: table;berfungsi, tetapi tidak menerima padding apa pun.

donquixote

@ ha404 Anda benar, padding berfungsi! jsfiddle.net/wgj7xvLe/4 setidaknya di browser saya (Chromium).

donquixote

3

@donquixote itu harus menerima padding selama Anda menggunakan border-collapse: terpisah. baru saja mengalami masalah itu.

Brad

Answer 9

13

Solusi jenius. margin: 0 auto;jika Anda membutuhkannya di tengah.

Mafia

Answer 10

4

Saya pikir Anda luar biasa.

billynoah

Answer 11

1

display: table;berfungsi, tetapi tidak menerima padding apa pun.

donquixote

Answer 12

@ ha404 Anda benar, padding berfungsi! jsfiddle.net/wgj7xvLe/4 setidaknya di browser saya (Chromium).

donquixote

Answer 13

3

@donquixote itu harus menerima padding selama Anda menggunakan border-collapse: terpisah. baru saja mengalami masalah itu.

Brad

Answer 14

32

kamu bisa memakai:

width: max-content;

Catatan: dukungan terbatas, periksa di sini untuk perincian lengkap tentang browser pendukung

Mustafa J
sumber

Saya belum pernah mendengar tentang ini! Menarik.

Ryan

Baik sejak Chrome 46 dan FF 66. Jawaban harus diterima. inline-blockdan lain-lain merusak tata letak saya.

i336_

1

@ i336_ Sampai hari ini masih belum didukung oleh browser Edge.

ChrisW

Edge, atau Chromium Edge? (Untuk menjadi jelas; yang pertama akan beralih cukup lama ...)

i336_

Menurut caniuse.com, ini didukung di Edge pada Edge 79 yang dirilis 14 Jan 2020. Secara total memiliki peringkat dukungan 92%. caniuse.com/?search=max-content Ini adalah sambutan yang menyenangkan untuk saya. Ketika saya pertama kali mendengarnya hampir 2 tahun yang lalu, ia tidak memiliki dukungan yang cukup luas untuk saya gunakan dalam produksi tetapi sekarang ia memilikinya.

Xandor

Answer 15

Saya belum pernah mendengar tentang ini! Menarik.

Ryan

Answer 16

Baik sejak Chrome 46 dan FF 66. Jawaban harus diterima. inline-blockdan lain-lain merusak tata letak saya.

i336_

Answer 17

1

@ i336_ Sampai hari ini masih belum didukung oleh browser Edge.

ChrisW

Answer 18

Edge, atau Chromium Edge? (Untuk menjadi jelas; yang pertama akan beralih cukup lama ...)

i336_

Answer 19

Menurut caniuse.com, ini didukung di Edge pada Edge 79 yang dirilis 14 Jan 2020. Secara total memiliki peringkat dukungan 92%. caniuse.com/?search=max-content Ini adalah sambutan yang menyenangkan untuk saya. Ketika saya pertama kali mendengarnya hampir 2 tahun yang lalu, ia tidak memiliki dukungan yang cukup luas untuk saya gunakan dalam produksi tetapi sekarang ia memilikinya.

Xandor

Answer 20

7

Saya akan menyimpan setiap baris ke divnya sendiri, jadi ...

<div class="row">
    <div class="cell">Content</div>
</div>
<div class="row">
    <div class="cell">Content</div>
</div>

Dan kemudian untuk CSS:

.cell{display:inline-block}

Sulit untuk memberikan solusi tanpa melihat kode asli Anda.

George
sumber

1

Terima kasih, tapi saya lebih suka tidak mencampurkan elemen div apa pun.

Staffan Estberg

Answer 21

1

Terima kasih, tapi saya lebih suka tidak mencampurkan elemen div apa pun.

Staffan Estberg

Answer 22

Sekali lagi: jawaban yang mungkin sedikit terlambat (tetapi bagi mereka yang menemukan halaman ini untuk jawabannya).

Alih-alih display:block;digunakandisplay:inline-block;

Answer 23

2

Coba ini:

li a {
    width: 0px;
    white-space:nowrap;
}

Roberto
sumber

Answer 24

2

Anda dapat menggunakan berikut ini:

display: inline-block;

Bekerja dengan baik pada tautan dan elemen lainnya.

Bruno Leveque
sumber

Answer 25

Saya memiliki masalah ini, saya menyelesaikannya seperti ini:

.parent {
  white-space: nowrap;
  display: table;
}

.child {
  display: block;
}

"white-space: nowrap" memastikan bahwa anak-anak dari anak tersebut (jika ada) tidak bergabung ke baris baru jika tidak ada cukup ruang.

tanpa "ruang putih: nowrap":

dengan "white-space: nowrap":

sunting: tampaknya itu juga hanya berfungsi tanpa bagian blok anak untuk saya, jadi sepertinya ini berfungsi dengan baik.

.parent {
  white-space: nowrap;
  display: table;
}

Blok tampilan tanpa lebar 100%

Jawaban: