如何在行中显示具有相同宽度的 3 个 li 元素

Question

我正在尝试弄清楚如何连续显示 3 个 li 元素，但它们的长度必须相同。

li 元素将被动态添加，因为这是一个 React 应用程序，当您点击设置警报按钮时，会弹出表单，您可以设置新的警报。设置警报后，还有另一个组件将所有警报列为li元素。

我的网站包括：

.container ，其中包含其他所有内容。

.container{
 width: 60%;
 margin: 0 auto;
 margin-top:5em;
 height: 100vh;
 text-align: center;
}

.clock - div，这是.container的第一个孩子

.clock{
 background-color: black;
 color: white;
 border-radius: .5em;
 margin: 0 auto;
 padding: 2em 3em;
 -webkit-box-shadow: 0px 0px 50px 2px rgba(0,0,0,0.75);
 -moz-box-shadow: 0px 0px 50px 2px rgba(0,0,0,0.75);
 box-shadow: 0px 0px 50px 2px rgba(0,0,0,0.75);
}

设置闹钟按钮 - 此按钮位于.clock div 下方。

.btn-setAlarm{
  width: 100%;
  margin-top: 1em;
  padding: 1em;
  border-radius: .3em;
  border:0;
  font-size: 1.2em;
  outline: none;
}

.btn-setAlarm:hover{
  cursor: pointer;
}

最后是 ul 元素，我希望所有 li 元素具有相同的宽度，内联显示，但一行最多 3 个。

ul{
  padding-left:0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

li{
  background-color: white;
  border-radius: .3em;
  width: 30%;
}

我的想法是：

1. display: flex for ul 元素将使所有 li 元素显示在一行中
2. 当li 元素过多时，flex-wrap:wrap 会将li 元素分到下一行
3. 将width: 30% 设置为li 将确保一行中的最大li 元素为3。

但我最终得到了这个，我无法弄清楚如何做到这一点，如果没有必要，我不想使用浮点数。

编辑：HTML 结构

<div className="container">
      {checkTime()}

      <div className="clock">
        <div className="time">
          <div className="column">
            <p>{time.currentDay}</p>
            <span>DAY</span>
          </div>

          <p className="dot">:</p>

          <div className="column">
            <p>{time.currentHour}</p>
            <span>HOURS</span>
          </div>

          <p className="dot">:</p>

          <div className="column">
            <p>{time.currentMinute}</p>
            <span>MINUTES</span>
          </div>

          <p className="dot">:</p>

          <div className="column">
            <p>{time.currentSecond}</p>
            <span>SECONDS</span>
          </div>
        </div>
      </div>

      <Alarm getInfo={getAlarm} />

      <ListAlarms alarms={time.alarms} removeAlarm={removeAlarm} />
    </div>

我还使用 React Spring 过渡来为这些 Li 元素设置动画，我注意到对于这个动画，React spring 正在创建 并且在这个 div 里面是 li 元素放置。所以我在这个 div 类中添加了 .div-li ，使其更具可格式化性。

Answer 1

将ul的position设置为relative，将justify-content设置为space-around，这将使它们获得定义的宽度并在它们之间留出空间，您也可以将justify-content设置为space-between如果你想。为flex-shrink、flex-grow 和flex-basis 添加flex 也是个好主意

ul{
    position: relative;/* added */
    padding-left:0;
    list-style: none;
    display: flex;
    justify-content: space-around;/* added */
    flex-wrap: wrap;
    width: 100%;
}

li{
  background-color: white;
  border-radius: .3em;
  width: 30%;
  flex: 0 0 0;/* added */
}

Answer 2

如果您将 flex-shrink: 0 添加到您的 li 规则中，这将防止它们变得小于定义的宽度。

编辑问题后的编辑/添加/发布生成的 HTML 代码：

由于lis 不是ul 的直接 子代，但有由 React 生成的 div.li-div 包装了 lis，您需要应用 @987654327 @ 设置（可能还有其他设置）为div.li-div 而不是li，这是代码中实际的弹性项目。所以这将是这样的规则：

div.li-div {
  background-color: white;
  border-radius: .3em;
  width: 30%;
}

如果这还不够，还要添加 flex-shrink: 0 以避免它们变得更小，成为弹性项目。