Languages
[Edit]
EN

CSS - unordered list style types

3 points
Created by:
Savannah
559

In this article, we would like to show you unordered list style types in CSS.

CSS - unordered list style types
CSS - unordered list style types

Practical example

In this section, we present runnable example with some of the most common unordered list style types (list-style-type property).

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    
    body {
        font-size: 20px;
        color: #1d6ab3;
        display: flex;
      	flex-wrap: wrap;
    }
    
    body > div {
     	min-width: 170px; 
    }
    
  </style>  
</head>
<body>

  <div>
    <div>disc</div>
    <ul style="list-style-type: disc">
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ul>
  </div>

  <div>
    <div>circle</div>
    <ul style="list-style-type: circle">
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ul>
  </div>

  <div>
    <div>square</div>
    <ul style="list-style-type: square">
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ul>
  </div>

  <div>
    <div>none</div>
    <ul style="list-style-type: none">
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ul>
  </div>

</body>
</html>
Donate to Dirask
Our content is created by volunteers - like Wikipedia. If you think, the things we do are good, donate us. Thanks!
Join to our subscribers to be up to date with content, news and offers.
Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join