Bagaimana untuk Menjajarkan Blok Sebaris pada Baris yang Sama: Flexbox lwn. Justifikasi Teks?

Menjajarkan Blok Sebaris pada Baris Yang Sama: Penyelesaian Komprehensif

Walaupun menjajarkan blok sebaris pada baris yang sama boleh mencabar, terdapat penyelesaian berkesan tersedia. Mari kita mendalami dua pendekatan yang biasa digunakan.

Pilihan 1: Flexbox

Flexbox menyediakan cara yang mudah dan fleksibel untuk mencapai penjajaran yang diingini. Dengan menggunakan paparan: flex; kepada bekas induk, anda boleh memanipulasi penempatan anak-anaknya menggunakan justify-content: space-between;. Pendekatan ini menawarkan keserasian merentas penyemak imbas yang sangat baik.

<code class="css">.header {
  display: flex;
  justify-content: space-between;
}</code>

Pilihan 2: Justifikasi Teks

Untuk sokongan penyemak imbas yang lebih luas, anda boleh menggunakan teknik penjajaran teks: justify bersama-sama dengan penggodam bintang untuk versi lama Internet Explorer.

<code class="css">.header {
  background: #ccc;
  text-align: justify;
}

.header:after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 0;
  font-size: 0;
  line-height: 0;
}

h1 {
  display: inline-block;
  margin-top: 0.321em;
}

.nav {
  display: inline-block;
  vertical-align: baseline;
}</code>

Kaedah ini menangani ketiadaan pemisahan antara elemen blok sebaris dengan menambahkan elemen kosong menggunakan elemen pseudo :selepas:

<code class="css">.header:after {
  content: '';
  display: inline-block;
  width: 100%;
  ...
}</code>

Kepada hilangkan ruang tambahan yang disebabkan oleh :selepas unsur pseudo, tetapkan saiz fon kepada 0 untuk induk dan tetapkannya kepada nilai yang diingini untuk elemen anak:

<code class="css">.header {
  font-size: 0;
}

h1, .nav {
  font-size: 14px;
}</code>

Atas ialah kandungan terperinci Bagaimana untuk Menjajarkan Blok Sebaris pada Baris yang Sama: Flexbox lwn. Justifikasi Teks?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!