Bagaimanakah Saya Boleh Mewajarkan Elemen Sekatan Sebaris Dengan Betul Tanpa Pemisah Baris Tambahan?

Bolehkah Elemen Inline-Block Disejajarkan dengan Betul dengan "text-align: justify;"?

Perbincangan sebelum ini telah meneroka cara memohon " text-align: justify" untuk mengagihkan elemen blok sebaris secara sama rata. Walau bagaimanapun, apabila menggunakan teknik ini, pemisah garisan dibuat pada penghujung baris elemen yang dibenarkan.

Sediakan Penyelesaian

Untuk menghapuskan ruang menegak tambahan ini, a penyelesaian melibatkan penggunaan margin negatif pada "elemen sebelum" sambil menggunakan "kedudukan: relatif" kepada elemen blok sebaris. Gabungan ini menganjak baris teks ke atas, mengalih keluar baris tambahan.

.prevNext {
    text-align: justify;
}

.prevNext a {
    display: inline-block;
    position: relative;
    top: 1.2em;
}

.prevNext:before{
    content: '';
    display: block;
    width: 100%;
    margin-bottom: -1.2em;
}

.prevNext:after {
    content: '';
    display: inline-block;
    width: 100%;
}

Penyelesaian Masa Depan

Pada masa hadapan, sifat "text-align-last" , disokong dalam Firefox dan Internet Explorer, boleh memberikan penyelesaian yang lebih mudah. Walau bagaimanapun, pada masa ini ia tidak dilaksanakan sepenuhnya dalam Webkit.

.prevNext {
    text-align: justify;
    text-align-last: justify;
}

Harta ini membenarkan baris terakhir elemen blok sebaris untuk dibenarkan, menghapuskan keperluan untuk penyelesaian.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mewajarkan Elemen Sekatan Sebaris Dengan Betul Tanpa Pemisah Baris Tambahan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!