Blok tampilan tanpa lebar 100%

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

— 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

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

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

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

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

5

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

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

— Renske
sumber

2

Coba ini:

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

— Roberto
sumber

2

Anda dapat menggunakan berikut ini:

display: inline-block;

Bekerja dengan baik pada tautan dan elemen lainnya.

— Bruno Leveque
sumber

1

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

— Cupu
sumber