Sebagian besar bilah navigasi diatur secara horizontal seperti yang ditunjukkan pada gambar di bawah ini, jadi bagaimana ini dicapai? Faktanya, ini terutama menggunakan pengaturan horizontal LI di tag <ul>. Berikut adalah contoh untuk menjelaskan secara rinci bagaimana diterapkan.
1. Tulis menu horizontal skema kode html<ul id = menu> <li> <a href = http: //www.baidu.com> baidu.com </a> </li> <li> <a href = // www.vevb.com> JB51.net </a> </li> <li> <a href = http:///ww.hw.hw.hw.hw. <li> <a href = http: //www.google.com class = last> google.com </a> </li> </ul>Kode CSS 2 penulisan
<1> Tetapkan gaya umum
<gaya tipe = text/css> #menu {font: 12px verdana, arial, sans-serif; /* Atur ukuran teks dan gaya font*/ lebar: 100%; } #menu, #menu li {List-style: none; / * Hapus simbol daftar default */ padding: 0; / * Hapus margin dalam default */ margin: 0; / * Lepaskan margin luar default */ float: kiri; /* Mengapung ke kiri*/ display: block;}<2> Tetapkan gaya tautan
<type style = text/css> #menu li a {display: block; /* Atur tautan ke elemen level blok*/ lebar: 150px; /* Atur lebar*/ tinggi: 30px; /* Atur ketinggian*/ garis-tinggi: 30px; /* Atur ketinggian garis, atur nilai yang sama untuk tinggi dan tinggi garis, sehingga satu garis teks dapat dipusatkan secara vertikal*/ teks-align: tengah; /* Teks Aligned Center*/ Latar Belakang:#3A4953; /* Atur warna latar belakang*/ warna: #fff; /* Atur warna teks*/ dekorasi teks: tidak ada; /* Lepaskan garis bawah*/-kanan: 1px solid #000; / * Tambahkan pembagi di sebelah kiri */} </style><3> Efek Link Hover
<gaya tipe = text/css> #menu li a: hover {latar belakang: #146c9c; /* Ubah warna latar belakang*/ warna: #ffff; /* Ubah warna teks*/} </tyle><4> Lepaskan kotak kanan bilah navigasi paling kiri
<type style = text/css> #menu li a.last {border-right: 0; /* Lepaskan perbatasan kiri*/} </style>3 Kode Lengkap
<! Doctype html> <html> <head> <meta charset = utf-8> <itement> efek prompt gambar </iteme> <skrip src = ../jQuery-3.3.1.min.js> </script> <style type = text/css> #menu {font: 12px verdana, arial, arial, arial, rial, rial, sing; /* Atur ukuran teks dan gaya font*/ lebar: 100%; } #menu, #menu li {List-style: none; / * Hapus simbol daftar default */ padding: 0; / * Hapus margin dalam default */ margin: 0; / * Lepaskan margin luar default */ float: kiri; /* Float kiri*/ display: blok; } #menu li a {display: inline-block; /* Atur tautan ke elemen level blok*/ lebar: 150px; /* Atur lebar*/ tinggi: 30px; /* Atur ketinggian*/ garis-tinggi: 30px; /* Atur ketinggian garis, atur nilai yang sama ke ketinggian dan tinggi garis, sehingga satu garis teks dapat dipusatkan secara vertikal*/ teks-align: tengah; /* Teks Aligned Center*/ Latar belakang:#3A4953; /* Atur warna latar belakang*/ warna: #fff; /* Atur warna teks*/ dekorasi teks: tidak ada; /* Lepaskan garis bawah*/-kanan: 1px solid #000; / * Tambahkan pembagi di sebelah kiri */} #menu li A: hover {latar belakang: #146c9c; /* Ubah warna latar belakang*/ warna: #fff; /* Ubah warna teks*/} #menu li A.Last {border-right: 0; /* Remove the left border*/ }</style> </head><body> <ul id=menu> <li><a href=http://www.baidu.com>Baidu.Com</a></li> <li><a href=//www.VeVb.com>Jb51.net</a></li> <li><a href = http: //www.yahoo.com> yahoo.com </a> </li> <li> <a href = http: //www.google.com class = last> google.com </a> </li> </ul> </google> </html>Jalankan secara online
Kiat: Anda dapat memodifikasi beberapa kode terlebih dahulu dan kemudian menjalankannya
Singkatnya, hal yang paling penting untuk membuatnya diatur secara horizontal adalah: Gaya utama tag <ui> adalah tampilan: balock;
Gaya utama <li> adalah tampilan: inline-balock, float: kiri, gaya daftar: tidak ada;
Ini adalah artikel tentang contoh implementasi dari pengaturan horizontal Li dalam tag dalam HTML. Untuk konten pengaturan horizontal HTML LI yang lebih terkait, silakan cari artikel Wulin.com sebelumnya atau artikel terkait berikut. Saya harap semua orang akan mendukung wulin.com di masa depan!