Cara Menyejajarkan Daftar Bullet di HTML

click fraud protection
...

Gunakan kode CSS untuk menyelaraskan daftar berpoin dalam HTML.

Desainer web menggunakan daftar peluru untuk lebih dari sekedar menambahkan peluru dan teks. Tag HTML yang digunakan untuk membuat daftar peluru berguna untuk membuat menu atau mengatur gambar agar JavaScript dimuat ke dalam tayangan slide. Belajar menggunakan kode lembar gaya berjenjang dalam hubungannya dengan daftar peluru -- disebut "daftar tidak berurutan" dalam bahasa gaul HTML -- akan membuka beberapa kemungkinan desain Web yang menarik.

Langkah 1

Buka file HTML Anda yang berisi daftar berpoin dan lihat di antara tag dan di bagian atas kode. Tambahkan tag jika belum ada. Jika kode Anda menyertakan a tag di suatu tempat setelah tag, dan itu berisi referensi ke file CSS, lalu buka file itu. Kode CSS Anda berada di antara tag atau di baris baru file CSS Anda.

Video Hari Ini

Langkah 2

Sejajarkan teks di dalam semua poin dengan mengatur "text-align" untuk Anda

    menandai. Itu
      tag membungkus di sekitar
    • dan
    • tag untuk mendefinisikannya sebagai bagian dari satu daftar. Saat Anda menyelaraskan teks untuk
        tag, perataan memengaruhi teks di setiap poin tetapi tidak menyelaraskan daftar itu sendiri ke kiri atau kanan halaman. Berikut adalah contoh kode CSS untuk mengatur "text-align":

ul {text-align: kanan;}

Perhatikan bahwa poin tidak bergerak dengan teks. Peluru tetap di kiri dalam kasus ini.

Langkah 3

Sejajarkan seluruh daftar ke kiri atau ke kanan halaman dengan menyetel "float" untuk Anda

    menandai. Ketika "float" diatur ke kiri atau kanan pada a
      tag, itu memindahkan seluruh daftar berpoin ke kiri atau kanan halaman. Atur float seperti ini:

ul {mengambang: benar;}

Anda dapat mengatur "mengambang" ke kiri atau kanan, tetapi tidak ke tengah.

Langkah 4

Bungkus Anda

    tag di

    dan

    tag untuk membuat pembungkus yang akan memusatkan daftar berpoin di halaman Anda. Kode yang Anda hasilkan akan terlihat seperti ini:
  • Daftar barang
  • Daftar barang

Itu

tag tidak memusatkan apa pun dengan sendirinya; Anda harus menggunakan CSS untuk memusatkan semuanya. Tambahkan kode berikut di antara Anda