originalTheme

カテゴリー：CSS

タグ： FAQ li デザイン初心者

HTMLのliタグはデフォルトの状態で、「・」が左側に出てしまいます。list-style-position: outside;がデフォルトで適応されているからです。list-style-position: inside;を指定すると他の要素と揃えることができます。

こちらは「技術スタック」ページのコードです。

技術スタックページ

page-developer.php

   <h3>開発言語</h3>
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
      <li>PHP</li>
      <li>Git</li>
    </ul>

page.css

ul {
  list-style: square;
  list-style-position: inside;
  margin-bottom: 10px;
}

list-style-position: inside;