Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Menjajarkan Blok Sebaris Secara Mendatar pada Baris yang Sama?

Bagaimana untuk Menjajarkan Blok Sebaris Secara Mendatar pada Baris yang Sama?

Mary-Kate Olsen
Mary-Kate Olsenasal
2024-10-30 22:26:03415semak imbas

How to Align Inline-Blocks Horizontally on the Same Line?

Menjajarkan Blok Sebaris Secara Mendatar pada Garisan Yang Sama

Masalah

Blok sebaris menawarkan kelebihan berbanding elemen terapung, seperti penjajaran garis dasar dan pemusatan automatik apabila port pandangan menjadi sempit. Walau bagaimanapun, menjajarkan dua blok sebaris secara mendatar pada baris yang sama boleh menimbulkan cabaran.

Cabaran Penjajaran Blok Sebaris

  • Apungan mungkin mengganggu penjajaran garis dasar dan menyebabkan lilitan yang tidak diingini .
  • Kedudukan relatif dan mutlak boleh membawa kepada isu jarak, sama seperti terapung.

Penyelesaian: Menggunakan Justifikasi Teks

Satu penyelesaian berkesan melibatkan penggunaan penjajaran teks : teknik justify:

Kod CSS

.header {
    text-align: justify;
    background: #ccc;
}

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

Penjelasan

  • Tetapkan penjajaran teks elemen induk kepada "justify" untuk mengedarkan teks secara sama rata merentas lebarnya.
  • Tambahkan pengepala elemen pseudo:selepas menggunakan ruang yang tinggal di antara blok-sebaris.
  • Tetapkan blok-sebaris h1 dan .nav untuk dipaparkan: blok-sebaris dan penjajaran menegak : garis dasar untuk mengekalkan garis dasar mereka.

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

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn