Bilakah anda menggunakan blok sebaris?

display: inline-block adalah nilai atribut CSS klasik! Ia bukan ciri baru, dan tidak perlu bimbang tentang keserasian pelayar. Ramai pemaju menggunakannya secara intuitif. Tetapi mari kita lihat lebih dekat. Dalam keadaan apakah ia berfungsi? Bilakah memilihnya berbanding dengan pilihan lain yang serupa?

Butang

Jawapan yang paling biasa yang saya dengar ialah: Saya selalu menggunakannya untuk butang .

Pada akhirnya, saya fikir ia masuk akal, tetapi ia membawa kepada sedikit salah faham yang saya fikirkan. Ideanya ialah elemen yang ingin kelihatan seperti butang (boleh digunakan<a></a> ,<button></button> atau unsur -unsur lain yang dicipta) boleh diatur sejajar seperti alam semula jadi, tetapi boleh mempunyai margin dan padding. Ini adalah sebahagian daripada salah faham: display: inline; Unsur -unsur masih boleh mempunyai margin dan padding, dan tingkah laku mereka mungkin konsisten dengan apa yang anda harapkan.

Perkara yang rumit ialah:

• Margin arah blok elemen sebaris akan diabaikan sepenuhnya
• padding elemen sebaris tidak menjejaskan ketinggian baris teks

Oleh itu, sementara gaya butang itu sendiri ditetapkan dengan baik, ia mungkin tidak berlaku dengan elemen induk dan teks sekitarnya. Berikut adalah demonstrasi:

Perkara menjadi lebih teruk apabila butang sebaris mula membungkus:

Jadi, saya fikir menggunakan inline-block pada butang sangat munasabah. Tetapi ……

Jangan lupa inline-flex dan inline-grid

Dengan display: inline-flex dan inline-grid , anda akan mendapat tingkah laku yang sama seperti inline-block , tetapi unsur-unsur (biasanya butang) boleh mendapat manfaat daripada sistem susun atur inline yang lebih kuat.

Ambil butang dengan ikon sebagai contoh, seperti yang ditunjukkan di bawah:

 <a data-line="" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" html="">.button svg {
  Vertical-Align: Middle;
}</a>

Ini tidak boleh betul -betul betul ...

Tetapi menggunakan inline-flex dapat menyelesaikan masalah ini dengan mudah:

 .button {
  Paparan: inline-flex;
  Align-item: pusat;
}

Dengan inline-flex atau inline-grid anda boleh mempunyai semua ciri sistem susun atur flexbox atau grid dalam blok dalam susun atur orientasi sebaris.

Blok yang masih boleh dipecahkan

Unsur blok sebaris akan menghormati lebar. Ini adalah satu lagi perbezaan di antara mereka dan unsur -unsur sebaris semata -mata. Orang yang digunakan untuk membina sistem susun atur lajur menggunakan blok sebaris kerana pada dasarnya ia melakukan apa yang boleh dilakukan oleh apungan tanpa bimbang tentang membersihkan float², membolehkan orang ramai mengambil kesempatan daripada kaedah pemecahan garis yang lebih elegan daripada apungan.

Idea bahawa unsur-unsur blok sebaris diwakili sebagai lajur yang boleh dipecahkan (walaupun disempit ke 1 lajur) masih wujud hari ini kerana ia adalah silap mata yang boleh digunakan dalam e-mel HTML untuk membolehkan susun atur pelbagai lajur untuk runtuh ke dalam lajur tunggal pada skrin kecil tanpa memerlukan pertanyaan media (sesetengah pelanggan e-mel tidak menyokong queries media).

Contoh Dan.

Penukaran pada elemen sebaris

Unsur -unsur sebaris tidak boleh ditukar. Jadi jika anda memerlukan penukaran, anda perlu menggunakan inline-block .

Sub-unsur yang tidak dipecahkan di tengah-tengah diri mereka

Anda boleh menggunakan lajur CSS pada teks perenggan, dan anda tidak perlu peduli sama ada mana -mana perenggan yang diberikan diputuskan di seluruh lajur. Tetapi kadang -kadang lajur CSS digunakan untuk blok, yang akan menjadi janggal. Anggapkan bahawa blok ini mempunyai latar belakang dan padding sendiri. Memutuskan sambungan sangat pelik secara visual.

Ini adalah helah pelik saya tidak boleh mengatakan saya faham 100% tetapi jika anda menggunakan display: inline-block; Pada kotak ini (dan mungkin menggunakan width: 100%; untuk memastikan mereka menyimpan lebar lajur), maka mereka tidak akan pecah dan padding akan dipelihara.

Cara mengatur senarai dengan cepat secara mendatar

Ini adalah satu lagi jawapan yang sangat popular untuk tweet asal saya. Senarai Elemen Stack Senarai Item secara menegak, seperti elemen peringkat blok. Mereka sebenarnya bukan blok. Mereka display: list-item; , yang sebenarnya penting di sini, seperti yang akan kita lihat. Kes penggunaan yang popular adalah "apabila saya ingin mengatur senarai secara mendatar" .

Jadi anda mempunyai senarai ...

• Tiga
• Kecil
• babi

Anda mahu mengubahnya ke baris, anda boleh ...

 li {
  paparan: blok sebaris;
}

dipaku.

Saya dengan cepat mencubanya di Voiceover, dan senarai blok sebaris masih mengisytiharkan unsur -unsur sebagai senarai, tetapi tidak ada peluru yang dibaca dengan kuat, yang masuk akal kerana mereka tidak wujud. Ini adalah masalah mengubah cara item senarai itu sendiri dipaparkan kepada list-item : mereka kehilangan ciri-ciri item senarai mereka.

Cara lain adalah untuk menetapkan elemen induk sebagai bekas Flexbox ...

 ul {
  Paparan: Flex;
}

... Ini melaksanakan garis mendatar (Flexbox Default), tetapi mengekalkan peluru kerana anda tidak mengubah bagaimana item senarai itu sendiri muncul. Sekiranya anda mahu memadamkannya secara manual, terpulang kepada anda.

Senarai berpusat

Bercakap tentang senarai, Jeff Starr hanya menulis blog mengenai senarai dalam teks berpusat, yang juga boleh menjadi janggal. Malu adalah bahawa teks di dalam item senarai boleh berpusat, tetapi item senarai itu sendiri masih lebar penuh, mewujudkan situasi di mana peluru tetap sejajar di sebelah kiri.

Penyelesaian Jeff adalah untuk menetapkan keseluruhan senarai sebagai blok sebaris. Ini menjadikan lebar senarai selebar lebar semulajadi kandungannya, yang membolehkan peluru meninggalkan tepi kiri dan bergerak dengan kandungan berpusat. Selagi terdapat unsur-unsur peringkat blok di depan dan di belakang, ini adalah penyelesaian yang baik.

Sebagai alternatif, jika matlamatnya adalah untuk mengurangkan lebar senarai ke lebar kandungan, anda juga boleh mencapai ini tanpa menghalang senarai daripada menjadi elemen peringkat blok:

 ul {
  lebar: Max-Content;
  Margin: 0 Auto;
  Teks-Align: Kiri;
}

1. Terdapat satu lagi masalah rumit dengan blok sebaris. Seperti elemen sebaris, mana -mana ruang di antara mereka sebenarnya akan menjadi ruang. Oleh itu, jika terdapat sebarang ruang di antara mereka, dua unsur inline-block sebanyak 50% tidak akan dipaparkan dalam satu baris. Berita baiknya ialah terdapat cara untuk menyelesaikan masalah ini.
2. Saya katakan "pada masa lalu" kerana, jika anda membuat sistem lajur hari ini, anda pasti akan menggunakan Flexbox atau grid - atau tidak membina "sistem" sama sekali, kerana hanya menggunakan sintaks ini sebahagian besarnya menafikan keperluan untuk sistem.

Atas ialah kandungan terperinci Bilakah anda menggunakan blok sebaris?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!