如何使用CSS建立沒有專案符號的無序列表？

有序或無序列表都會分別帶有數字或專案符號。這是使用 list-style-type 屬性設定的網頁列表樣式。讓我們看看如何建立沒有專案符號的無序列表。

建立無序列表

使用 <ul> 元素建立無序列表 −

<ul>
  <li>Tiger</li>
  <li>Giraffe</li>
  <li>Lion</li>
  <li>Panther</li>
  <li>Jaguar</li>
</ul>

設定列表樣式並刪除專案符號

將 list-style-type 屬性設為 none 可從無序列表中刪除專案符號 −

ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   font-size: 18px;
   font-weight: bold;
}

示例

若要使用 CSS 建立沒有專案符號的無序列表，程式碼如下 −

<!DOCTYPE html>
<html>
<head>
   <style>
      body{
         font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      }
      ul {
         list-style-type: none;
         margin: 0;
         padding: 0;
         font-size: 18px;
         font-weight: bold;
      }
   </style>
</head>
<body>
   <h1>Remove bullets from ul example</h1>
   <ul>
      <li>Tiger</li>
      <li>Giraffe</li>
      <li>Lion</li>
      <li>Panther</li>
      <li>Jaguar</li>
   </ul>
</body>
</html>

在列表中用影像替換專案符號

在列表中使用 list-style-image 可將影像設為列表項標記專案符號的位置。若要將影像設為標記的位置，請對 list-style 屬性使用 url()。我們已設定一個專案符號影像 −

ul  {
  list-style: url("https://tutorialspoint.tw/images/clipart/bullet/bullet2.gif");
}

示例

讓我們看看示例 −

<!DOCTYPE html>
<html>
<head>
   <style>
      ul  {
         list-style: url("https://tutorialspoint.tw/images/clipart/bullet/bullet2.gif");
      }
   </style>
</head>
<body>
   <h1>Sports</h1>
   <ul>
      <li>Cricket</li>
      <li>Football</li>
      <li>Hockey</li>
   </ul>
</body>
</html>

更新於： 14-Dec-2023

521 次瀏覽

開啟您的職業生涯

完成課程，獲得認證

開始
廣告