CSS list-itemでマーカー用のリストボックスを表示する

環境
Google Chrome 106.0.5249.119
Windows 10 Home 64bit

構文
display: list-item;
list-itemは、マーカー用のボックスを表示します
リストの見た目になります。

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html>
<head>
<style>
span {
display: list-item;
margin-left: 18px;
}
</style>
</head>
<body>
<p>リストのサンプル
<span>AA11</span>
<span>BB22</span>
<span>CC33</span>
<span>DD44</span>
</p>
</body>
</html>
<!DOCTYPE html> <html> <head> <style> span { display: list-item; margin-left: 18px; } </style> </head> <body> <p>リストのサンプル <span>AA11</span> <span>BB22</span> <span>CC33</span> <span>DD44</span> </p> </body> </html>
<!DOCTYPE html>
<html>
<head>
<style>
  span {
    display: list-item;
    margin-left: 18px;
  }
</style>
</head>
<body>

<p>リストのサンプル
  <span>AA11</span>
  <span>BB22</span>
  <span>CC33</span>
   <span>DD44</span>
</p>

</body>
</html>

 

CSS

Posted by arkgame