三里等宽

问题描述

我想要三个等宽的 li 元素。我使用了 calc，但是代码不起作用。

width:calc(100%/3);
display:inline-block;

片段：

ul {
  position: fixed;
  bottom: 25px;
  left: 5%;
  width: 90%;
}

ul li {
  width: calc(100%/3);
  display: inline-block;
}

ul li:nth-child(2) {
  text-align: center;
}

ul li:nth-child(3) {
  text-align: right;
}

<ul>
  <li><a href="">Phone</a></li>
  <li><a href="">Imprint</a></li>
  <li><a href="">Email</a></li>
</ul>

解决方法

在display:flex中使用ul，在flex: 1中使用li

body {
  background: lightblue
}

ul {
  list-style: none;
  padding: 0;
  position: fixed;
  bottom: 25px;
  left: 5%;
  width: 90%;
  display: flex;
  background: white;
}

li {
  flex: 1;
  box-shadow: 0 0 0 1px black
}

<ul>
  <li><a href="">Phone</a></li>
  <li><a href="">Imprint</a></li>
  <li><a href="">Email</a></li>
</ul>