図に示すように、UL は固定幅、li は可変幅、li は inline-block に設定されています。これで、li が水平方向に均等に配置され、ul の中央に配置されるようになります。設定方法
<style type="text/css">
ul{margin:0 auto;padding:0;
width:400px;background:#F00;
text-align:center;
}
li{
list-style:none;
display:inline-block;
margin:0 10px;width:100px;
background:#0F0;}</style><ul>
<li>1</li><li>2</li><li>3</li></ul>純粋な CSS は、li に特定の幅が与えられた場合にのみ機能します。
それ以外の場合は、js を使用する必要があります。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
