web-dev-qa-db-ja.com

ULにはデフォルトのマージンまたはパディングがありますか

これは馬鹿げた質問のように思えるかもしれませんが、基本ページにULを追加したので、リストが中心から外れているようです。リストについて特別なことは何もありません。特定のcssは追加されていません。単なるリストです。ライブをロードすると、中心からわずかにずれます。
左側にデフォルトのマージンまたはパディングがありますか？

<h3>Title Heading</h3>
   <ul id="listItems">
       <li>itemOne</li>
       <li>itemTwo</li>
       <li>itemThree</li>
   </ul>

本体には、中央揃え、整列、フロートなどのすべてのcssコードがあります。「タイトルヘッダー」は完全に整列します。リストが少しずれています。

ありがとうございました。

ああ、これが重要かどうかはわかりませんが、「id」の原因を追加しました...「最初のタイプ」を使用して最初のアイテムをem（太字）にしたかったのです。

htmlcssalignmenthtml-lists
13
JZeig1

問題は、デフォルトで、ブラウザにカスタムcssがあることです-chrome例：

ul, menu, dir {
   display: block;
   list-style-type: disc;
   -webkit-margin-before: 1em;
   -webkit-margin-after: 1em;
   -webkit-margin-start: 0px;
   -webkit-margin-end: 0px;
   -webkit-padding-start: 40px;
}

ulにはカスタムルールを使用する必要があります。

element.style {
    margin-left: 0px;
    /* set to 0 if your not using a list-style-type */
    padding-left: 20px;
}
14
Michael Wilson

リストは常に位置合わせされるため、テキストは親要素のエッジと一致します。つまり、箇条書きポイントはデフォルトで要素の外側（左側）に配置されます。次のようにテキストを整列させるのではなく、箇条書きを強制的に整列させることができます。

ul {
  list-style-position: inside; }

または、次のようにリスト要素全体をプッシュするために独自のマージンを追加することもできます。

ul {
  margin-left: 20px; }
4
Coop