Bagaimanakah saya boleh menjajarkan blok sebaris ke kiri dan kanan pada satu baris?

Menjajarkan Blok Sebaris Kiri dan Kanan pada Baris Tunggal

Apabila bekerja dengan blok sebaris, sukar untuk menjajarkannya dengan tepat pada satu baris. Artikel ini menyediakan dua penyelesaian kepada masalah ini: Flexbox dan justifikasi penjajaran teks.

Penyelesaian Flexbox

Flexbox menawarkan penyelesaian yang elegan dan ringkas. Dengan menggunakan paparan: flex; kepada bekas induk dan justify-content: ruang-antara; untuk menjajarkan elemen anak, anda boleh mencapai penjajaran yang diingini dengan mudah.

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

Penyelesaian Justifikasi Penjajaran Teks

Menggunakan justifikasi penjajaran teks ialah satu lagi pilihan yang berdaya maju. Berikut ialah contoh kod CSS yang menggabungkan teknik dengan beberapa penggodaman khusus penyemak imbas untuk keserasian yang lebih baik:

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

  /* ie 7*/  
  *width: 100%;  
  *-ms-text-justify: distribute-all-lines;
  *text-justify: distribute-all-lines;
}
 .header:after{
  content: '';
  display: inline-block;
  width: 100%;
  height: 0;
  font-size:0;
  line-height:0;
}

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

  /* ie 7*/ 
  *display: inline;
  *zoom: 1;
  *text-align: left; 
}

.nav {
  display: inline-block;
  vertical-align: baseline; 

  /* ie 7*/
  *display: inline;
  *zoom:1;
  *text-align: right;
}</code>

Pendekatan ini berfungsi dengan baik merentas pelayar yang berbeza, termasuk IE7 dan ke atas.

Ingat, jika elemen blok sebaris tidak dipisahkan oleh ruang, penyelesaian justifikasi penjajaran teks mungkin tidak berfungsi. Selain itu, menetapkan saiz fon elemen induk kepada 0 dan menetapkan semula kepada nilai yang diingini untuk elemen anak boleh membantu mengalih keluar ruang tambahan yang diperkenalkan oleh elemen pseudo selepas.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menjajarkan blok sebaris ke kiri dan kanan pada satu baris?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!