适当地垂直传播列表

Question

我已经搜索了这个问题，发现了一些类似的答案，但并不完全是我想要的，所以这里有。

我有一个无序列表需要垂直传播。 这就是我所拥有的：

<div class="icons">
<ul>
    <li><div class="twitter-icon"><img src="images/twitter.png"></div></li>
    <li><div class="github-icon"><img src="images/github.png"></div></li>
    <li><div class="linkedin-icon"><img src="images/linkedin.png"></div></li>
</ul>
</div>

.icons {
    position:absolute;
    top:0;
    right:5%;
    height:100vh;
}
.icons ul {
    display:table;
    table-layout: fixed;
    height:100%;
    margin:0;
    padding:0;
}
.icons li {
    display: table-row;
}

这是结果：

这就是我要找的东西：

我希望这足以解释我的问题。

Answer 1

而不是table你可以使用像这样的flexbox显示：

display: flex; /* define a flexbox */
flex-direction: column; /* place it vertically*/
justify-content: space-around; /* spread it vertically */

见下面的演示：

.icons {
  position: absolute;
  top: 0;
  right: 5%;
  height: 100vh;
}

.icons ul {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
  margin: 0;
  padding: 0;
}

.icons li {
  display: table-row;
}

<div class="icons">
  <ul>
    <li>
      <div class="twitter-icon"><img src="http://placehold.it/100x100"></div>
    </li>
    <li>
      <div class="github-icon"><img src="http://placehold.it/100x100"></div>
    </li>
    <li>
      <div class="linkedin-icon"><img src="http://placehold.it/100x100"></div>
    </li>
  </ul>
</div>