How To Create A Bullet List With No Bullets In HTML - Computer Hope

Trang chủ » Html List Without Bullet Points » How To Create A Bullet List With No Bullets In HTML - Computer Hope

Có thể bạn quan tâm

How to create a bullet list with no bullets in HTML Updated: 11/12/2023 by Computer Hope

In some situations, you may want to create a bullet list with no bullets or a list items with no bullets. To create an ordered list or unordered list with no bullets (hide the bullets), follow the steps below.

HTML example

With HTML (HyperText Markup Language), adding the "list-style: none" CSS style class to the unordered list (<ul>) or ordered list (<ol>) tag removes any bullet or number.

<ul style="list-style: none;"> <li>List item with no bullet</li> <li>Second item</li> </ul>

HTML with CSS example

Although the above example works in almost every situation, it is better to have the CSS (Cascading Style Sheets) in a separate, external file. Below is the CSS and HTML that removes bullets.

Using the CSS below removes bullets from all unordered links (<ul>). This CSS can be useful if you have no intentions of using bullets or want to use an image instead of a bullet.

<style type="text/css"> ul { list-style-type: none; } </style>

If you only intend to have one list, not have bullets or numbers, it's a better idea to create a class to be used anytime you do not want bullets:

<style type="text/css"> .nobull { list-style-type: none; } </style>

In the above CSS, a new class called "nobull" is created. This class can then be used anytime you do not want a bullet as shown in the example below.

<ul class="nobull"> <li>List item with no bullet</li> <li>Second item</li> </ul> Tip

You could also apply this class to any of the list items (<li>) to removed bullets from some, while keeping the other bullets unchanged.

Example output

Below is an example of how the output for an unordered bullet list appears without its bullets.

  • List item with no bullet
  • Second item
  • How to create a bullet and number list in HTML.
  • See the bullet list definition for further information and related links.
  • HTML and web design help and support.

Từ khóa » Html List Without Bullet Points