使用所有父宽度空间和多行排列列表项

Question

我在600px宽度div中有一个<ul>（这个宽度是可变的。它设置在％.. 600就是这样）。 我要做的是使用所有600px宽度放置<li>项目，保持每个<li>项目之间的空间。

我不打算使用javascript！ 谢谢你的帮助！

就像这样：

* { margin:0; padding:0; }

#myDiv {
  width:600px;
  display:table;
  background:lime;    
}

#myDiv ul {
  list-style:none;
}

#myDiv ul li {
  display:inline-block;
  width:180px;
  background:red;   
}

<div id="myDiv">
   <ul>
       <li>content</li>
       <li>content</li>
       <li>content</li>
       <li>content</li>
       <li>content</li>
   </ul>
</div>

注意我有5个<li>个项目。 我想第一个项目从左边开始。 第二个在中间。 而第三个位于父div的右侧。

因此，该列表将边距放在第二行开始。 第4个从左侧开始（在第1个下方）。 第五名就在第二名之下。

只是为了说明。这是一个预览演示。

我正在尝试做什么：

我现在所达到的目标：

Answer 1

将display: grid提交给ul，使用 CSS Grids 。像：

#myDiv ul {
  display: grid; /* Grid */
  grid-template-columns: auto auto auto; /* Defining 3 column layout */
  justify-content: space-between; /* Spacing out the list items equally */
}

请看下面的代码段：

* { margin:0; padding:0; }

#myDiv {
  width:600px;
  background:lime;    
}

#myDiv ul {
  list-style:none;
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: space-between;
}

#myDiv ul li {
  display:inline-block;
  width:180px;
  background:red;
}

<div id="myDiv">
   <ul>
       <li>content</li>
       <li>content</li>
       <li>content</li>
       <li>content</li>
       <li>content</li>
   </ul>
</div>

希望这有帮助！