How to center and evenly distribute the li in ul_html/css_WEB-ITnose

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

Reply to the discussion (solution)

<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.