如何更改“对齐内容：空格间隔”中的颜色;＆＃39; CSS

Question

如何在空间之间添加颜色以便＆＃39; background-color:lightblue;＆＃39;在LINK之后，我的菜单栏中留下了一个巨大的空白。

＆＃13;

＆＃13;

#main {
  height: 150px;
  border: 1px solid #c3c3c3;
  display: -webkit-flex;
  /* Safari */
  -webkit-justify-content: space-between;
  /* Safari 6.1+ */
  display: flex;
  justify-content: space-between; 
}
#main div {
  width: 70px;
  height: 70px;
}

＆＃13;

<div id="main">
  <div style="background-color:lightblue;">LINK</div>
  <div style="background-color:lightblue;">LINK</div>
  <div style="background-color:lightblue;">LINK</div>
  <div style="background-color:lightblue;">LINK</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

对于纯色和简单的方式，box-shadow可以提供帮助：

＆＃13;

＆＃13;

#main {
  width: 400px;
  height: 150px;
  border: 1px solid #c3c3c3;
  display: -webkit-flex;
  /* Safari */
  -webkit-justify-content: space-between;
  /* Safari 6.1+ */
  display: flex;
  justify-content: space-between; 
  overflow:hidden;
}
#main div {
  width: 70px;
  height: 70px;
}

＆＃13;

<div id="main">
  <div style="background-color:lightblue;box-shadow:-40px 0 lightblue, 40px 0 lightblue">LINK</div>
  <div style="background-color:lightblue;box-shadow:-40px 0 lightblue, 40px 0 lightblue">LINK</div>
  <div style="background-color:lightblue;box-shadow:-40px 0 lightblue, 40px 0 lightblue">LINK</div>
  <div style="background-color:lightblue;box-shadow:-40px 0 lightblue, 40px 0 lightblue">LINK</div>
</div>

＆＃13;

＆＃13;

＆＃13;