如何在水平<li>之间设置空间，使它们恢复100％的页面

Question

我有一个包含一些元素的列表（有时候有3个/有时4个或更多......）

我想做的是让它们自动调整以使用所有空间。

css有办法吗？告诉他们＆＃34;嘿

我希望您使用100％的可用空间＆＃34; ？

Actualy，它很好，但我希望它们能够占用所有空间。

这就是我所拥有的：

这就是我想要的：

如果有更多的元素，如果它可以在不改变css代码的情况下自动调整，那就太棒了。

我已尝试使用margin:auto，但它无效。

任何帮助都会非常感激

Answer 1

使用flexbox。使用justify-content属性并将其设置为space-between

学习flexbox的好方法是使用这些网站：

1. http://flexboxfroggy.com/
2. http://www.flexboxdefense.com/
＆＃13;
＆＃13;
li{
  height: 50px;
  width: 50px;
  border: 1px solid;
}

ul{
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
＆＃13;
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
＆＃13;
＆＃13;
＆＃13;