Bagaimana untuk mengalih keluar lekukan daripada item senarai tidak tersusun menggunakan CSS?-tutorial css-php.cn

Bagaimana untuk mengalih keluar lekukan daripada item senarai tidak tersusun menggunakan CSS?

王林

Lepaskan： 2023-09-20 12:33:04

ke hadapan

1600 orang telah melayarinya

如何使用 CSS 从无序列表项中删除缩进？

Menggayakan senarai tidak tersusun menggunakan CSS, lekukan ialah ciri biasa yang digunakan untuk menyediakan hierarki visual untuk menyenaraikan item. Walau bagaimanapun, dalam beberapa kes anda mungkin mahu mengalih keluar lekukan daripada item senarai tertentu atau keseluruhan senarai.

Senarai tidak tersusun, juga dikenali sebagai senarai bertitik tumpu, ialah senarai HTML yang memaparkan maklumat sebagai senarai item, setiap satu didahului dengan titik atau simbol. Item dalam senarai tidak bernombor atau dipesan dalam mana-mana susunan tertentu tujuan senarai tidak tersusun adalah untuk memisahkan secara visual dan menyusun kandungan yang berkaitan ke dalam item diskret.

Dalam artikel ini, kita akan belajar cara mengalih keluar lekukan daripada item senarai tidak tersusun dan memahami cara berbeza untuk melaksanakan tugas ini dalam CSS.

Cara berbeza untuk mengalih keluar lekukan daripada item senarai yang tidak tersusun?

Terdapat pelbagai cara untuk mengalih keluar lekukan daripada item senarai tidak tersusun dalam CSS. Mari kita bincangkan setiap daripada mereka secara terperinci bersama dengan sintaks dan contoh mereka.

Kaedah 1: Gunakan atribut teks-inden

Dalam kaedah ini, kami akan menggunakan sifat inden teks untuk mengalih keluar inden item senarai yang tidak tertib. Atribut inden teks digunakan untuk menentukan jumlah lekukan baris pertama teks dalam elemen. Untuk mengalih keluar lekukan, kami boleh menetapkan nilai inden teks item senarai kepada 0.

Tatabahasa

Berikut ialah sintaks untuk mengalih keluar inden daripada item senarai tidak tersusun menggunakan sifat inden teks.

ul li {
   text-indent: 0;
}

Salin selepas log masuk

Contoh

Dalam contoh yang diberikan, kami menggunakan sifat inden teks untuk mengalih keluar lekukan daripada senarai bahasa pengaturcaraan yang tidak tertib.

<html>
<head>
   <title>Example to remove indentation from unordered list item using the text-indent property</title>
   <style>
      ul li {
         text-indent: 0;
      }
   </style>
</head>
<body>
   <h2 style="color: green;">List of most used programming languages</h2>
   <ul>
      <li>Java</li>
      <li>Python</li>
      <li>C++</li>
      <li>JavaScript</li>
      <li>Swift</li>
      <li>PHP</li>
      <li>Ruby</li>
      <li>SQL</li>
      <li>Kotlin</li>
      <li>Scala</li>
      <li>Perl</li>
      <li>Objective C</li>
   </ul>
</body>
</html>

Salin selepas log masuk

Kaedah 2: Gunakan atribut padding

Dalam kaedah ini, kami akan menggunakan sifat padding untuk mengeluarkan lekukan item senarai yang tidak tersusun. Sifat padding menetapkan jumlah ruang antara kandungan elemen dan sempadannya. Untuk mengalih keluar lekukan, kita boleh menetapkan nilai padding-left item senarai kepada 0.

Tatabahasa

Berikut ialah sintaks untuk mengalih keluar lekukan daripada item senarai tidak tertib menggunakan atribut padding.

ul li {
   padding-left: 0;
}

Salin selepas log masuk

Contoh

Dalam contoh yang diberikan, kami menggunakan sifat padding untuk mengalih keluar lekukan daripada senarai tidak tertib dalam bahasa pengaturcaraan.

<html>
<head>
   <title>Example to remove indentation from unordered list item using the padding-left property</title>
   <style>
      ul li {
         padding-left: 0;
      }
   </style>
</head>
<body>
   <h2 style="color: green;">List of most used programming languages</h2>
   <ul>
      <li>Java</li>
      <li>Python</li>
      <li>C++</li>
      <li>JavaScript</li>
      <li>Swift</li>
      <li>PHP</li>
      <li>Ruby</li>
      <li>SQL</li>
      <li>Kotlin</li>
   </ul>
</body>
 </html>

Salin selepas log masuk

Kaedah 3: Gunakan atribut margin

Dalam kaedah ini, kami akan menggunakan sifat margin untuk mengalih keluar lekukan item senarai tidak tertib. Sifat margin digunakan untuk menetapkan jumlah ruang antara elemen dan elemen bersebelahan. Untuk mengalih keluar lekukan, kami boleh menetapkan nilai kiri jidar item senarai kepada 0.

Tatabahasa

Berikut ialah sintaks untuk mengalih keluar lekukan daripada item senarai tidak tertib menggunakan sifat margin.

ul li {
   margin-left: 0;
}

Salin selepas log masuk

Contoh

Dalam contoh yang diberikan, kami menggunakan sifat margin-left untuk mengalih keluar lekukan daripada senarai tidak tertib dalam bahasa pengaturcaraan.

<html>
<head>
   <title>Example to remove indentation from unordered list item using the margin-left property</title>
   <style>
      ul li {
         margin-left: 0;
      }
   </style>
</head>
<body>
   <h2 style="color: green;">List of most used programming languages</h2>
   <ul>
      <li>Java</li>
      <li>Python</li>
      <li>C++</li>
      <li>JavaScript</li>
      <li>Swift</li>
      <li>PHP</li>
      <li>Ruby</li>
   </ul>
</body>
</html>

Salin selepas log masuk

Kaedah 4: Menggunakan atribut kedudukan gaya senarai

Dalam kaedah ini, kami akan menggunakan sifat kedudukan gaya senarai untuk mengalih keluar lekukan item senarai tidak tertib. Secara lalai, penanda berada di luar kawasan kandungan item senarai, yang menyebabkan lekukan. Walau bagaimanapun, anda boleh menetapkan nilai kedudukan gaya senarai ke dalam untuk mengalihkan penanda di dalam kawasan kandungan dan mengalih keluar inden.

Tatabahasa

Di bawah ialah sintaks untuk mengalih keluar lekukan daripada item senarai tidak tersusun menggunakan atribut kedudukan gaya senarai.

ul li {
   list-style-position: inside;
}

Salin selepas log masuk

Contoh

Dalam contoh yang diberikan, kami menggunakan atribut kedudukan gaya senarai untuk mengalih keluar lekukan daripada senarai tidak tertib dalam bahasa pengaturcaraan. Sifat kedudukan gaya senarai menentukan kedudukan tanda item senarai (titik peluru). Di sini kami menetapkan kedudukan gaya senarai ke dalam, yang bermaksud titik peluru akan berada di dalam item senarai. Memandangkan ia adalah sebahagian daripada item senarai, ia menjadi sebahagian daripada teks dan menolak teks ke permulaan.

<html>
<head>
   <title>Example to remove indentation from unordered list item using the list-style-position property</title>
   <style>
      ul li {
         list-style-position: inside;
      }
   </style>
</head>
<body>
   <h2 style="color: green;">List of most used programming languages</h2>
   <ul>
      <li>Java</li>
      <li>Python</li>
      <li>C++</li>
      <li>JavaScript</li>
      <li>Swift</li>
      <li>PHP</li>
      <li>Ruby</li>
      <li>SQL</li>
   </ul>
</body>
</html>

Salin selepas log masuk

Kesimpulan

Inden ialah ciri biasa yang menyediakan hierarki visual dalam senarai tidak tersusun menggunakan CSS. Walau bagaimanapun, dalam beberapa kes kami mungkin perlu mengalih keluar lekukan daripada item tertentu atau keseluruhan senarai. Dalam artikel ini, kami membincangkan cara mengalih keluar lekukan dan mempelajari cara berbeza untuk mengalih keluar lekukan daripada item senarai tidak tertib menggunakan CSS, termasuk lekukan teks, pelapik, jidar dan sifat kedudukan gaya senarai. Kaedah ini boleh digunakan mengikut keperluan khusus dan keperluan reka bentuk halaman web. Dengan memahami kaedah ini, pembangun boleh mempunyai kawalan yang lebih besar ke atas gaya halaman web dan mencipta reka bentuk yang lebih menarik secara visual.

Atas ialah kandungan terperinci Bagaimana untuk mengalih keluar lekukan daripada item senarai tidak tersusun menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!