javascript – 中心对齐菜单,间距相等

2019年8月3日 196次阅读

我有这样的菜单

Home  About  Privacy  Shopping  Contact Us

我想在其容器的中心显示此菜单(无论容器的宽度是多少).我可以将20％的宽度应用于这些列表项,但是之后一些列表项之间的间距更大,而其他列表项由于文本大小不同而几乎没有

<div id="container">
   <ul>
      <li><a>Home</a></li>
      <li><a>About</a></li>
      <li><a>Privacy</a></li>
      <li><a>Shopping</a></li>
      <li><a>Contact us</a></li>
   </ul>
</div>

最佳答案 尝试使用Flex Box布局(
Demo)：

#container ul {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -ms-box-orient: horizontal;
    box-orient: horizontal
    }

#container li {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-box-flex: 1;
    box-flex: 1;
    border: solid 1px #000;
    text-align: center
    }
点赞