主页 / 问题 / 1050884
Accepted
Gleb Pristupa
Asked:2020-11-26 20:16:20 +0800 CST2020-11-26 20:16:20 +0800 CST

响应带有元素的块

  • 772

我需要对此块进行自适应，使其不会损坏。 https://codepen.io/Glebmak/pen/JjjQEgo

  • 缩进的问题，因为 我指出，每个第 4 个元素的右侧都会有一个缩进，当然，您可以调整所有内容以适应每个像素，但这不是很符合语法。
  • space-between 的问题，如果一行中有 2 个元素，那么元素将被压向右侧和左侧是合乎逻辑的。

我尝试了不同的方法，指定了元素 calc(16.66%) 的宽度等。

.container {
  max-width: 420px;
  border: 1px solid #1b559e;
}
.fix__time {
    padding-top: 8px;
    margin: 8px 26px 0;
    border-top: 1px solid #dde0e3;
    text-align: center;
}

ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-left: 0;
}

li {
  list-style-type: none;
  margin: 0 12px 16px 0;
}

.fix__time-btn {
    height: 32px;
    width: 72px;
    line-height: 32px;
    border-radius: 4px;
    color: #fff;
    background-color: #1b559e;
}
<div class="container">
  <div class="fix__time">
    <ul>
      <li><div class="fix__time-btn">15:30</div></li> 
      <li><div class="fix__time-btn">16:30</div></li> 
      <li><div class="fix__time-btn none">—</div></li> 
      <li><div class="fix__time-btn none">—</div></li> 
      <li><div class="fix__time-btn">17:30</div></li> 
      <li><div class="fix__time-btn">18:30</div></li> 
      <li><div class="fix__time-btn">19:30</div></li> 
      <li><div class="fix__time-btn">20:30</div></li>
    </ul>
  </div>
</div>

html

1 个回答

  1. Best Answer

    一般来说，似乎没有人知道如何做到这一点，这很奇怪，或者没有人愿意帮忙。结果，我决定在网格上做，一切似乎都很清楚

    .container {
  max-width: 420px;
  border: 1px solid #1b559e;
}
.fix__time {
    padding-top: 8px;
    margin: 8px 26px 0;
    border-top: 1px solid #dde0e3;
    text-align: center;
}

ul {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(84px,1fr));
  grid-auto-rows: 46px;
  grid-gap: 0;
  padding-left: 0;
}

li {
  display: flex;
  justify-content: center;
  list-style-type: none;
}

.fix__time-btn {
    height: 32px;
    width: 72px;
    line-height: 32px;
    border-radius: 4px;
    color: #fff;
    background-color: #1b559e;
}
    <div class="container">
  <div class="fix__time">
    <ul>
      <li><div class="fix__time-btn">15:30</div></li> 
      <li><div class="fix__time-btn">16:30</div></li> 
      <li><div class="fix__time-btn none">—</div></li> 
      <li><div class="fix__time-btn none">—</div></li> 
      <li><div class="fix__time-btn">17:30</div></li> 
      <li><div class="fix__time-btn">18:30</div></li> 
      <li><div class="fix__time-btn">19:30</div></li> 
      <li><div class="fix__time-btn">20:30</div></li>
    </ul>
  </div>
</div>

    • 0

相关问题