Ul has a fixed width, li has a variable width, and li has been set to inline-block, as shown in the picture. Now I want the li to be evenly distributed horizontally and centered in the ul. I don’t know how to set it up
<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>Pure css only works if you give li a given width.
Otherwise, we have to use js.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
