ul要素を横並びにするためのdiv要素の必要性

Question

初歩的な質問ですが、
ul要素を使ってリストを横並び中央寄せにしたい場合、div要素で囲む必要はありますか？
あるとしたら、そうなる理由も教えていただきたいです。

マークアップの設計でdivグルーピングする基準がいまいち分からず困っています。
よろしくお願いします。

該当のソースコード

<div>
  <ul>
    <li>menu</li>
    <li>access</li>
    <li>contact</li>
  </ul>
</div>

Comments

[m.ts10806]

質問の意図が不明。
グルーピングについて解説している記事を 自ら見つけて確認された方が理解が深まるのでは？

Answer 1

ulは横いっぱいに広がるのでwidthなどを指定しないとセンタリングはできません
flexでliの集合をセンタリングすればよいでしょう。

ul{display:flex;margin:auto;padding:0;background-Color:yellow;justify-content:center;}
li{list-style:none;display:block;border:solid 1px;}
li:not(:first-child){border-left:0px;}

Comments

[yambejp]

ulは背景が黄色くしてあるのでわかるとおり横いっぱいです。