三里等宽[重复]答案

【问题标题】：three li with equal width [duplicate]三里等宽[重复]
【发布时间】：2021-05-28 09:03:10
【问题描述】：

我想要三个宽度相等的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>

【问题讨论】：

标签： html css css-calc

【解决方案1】：

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

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>

【讨论】：