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

Question

我在宽度为600像素的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 to ul来使用CSS网 display: grid 。 喜欢：

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

希望这可以帮助！