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

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!