Question

我尝试在两个框之间留一个间距，但它不起作用，我尝试使用填充边距位不起作用。

我的代码：

html {
  background-color: #2d303a;
  background: #2d303a;
}

.container {
  display: flex;
  align-items: center;
  padding: 1rem;
  background-color: #319635;
  text-align: center;
  border-radius: 7px;
  justify-content: center;
  align-items: center;
}

.item-1 {
  color: white;
  font: bold 16px/30px "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0 20px;
}

.bacground_color {
  background: #2d303a;
}

<div class="container">
  <div class="item-1">1
    <div class="item-2">Dossier(s) non affecté(s) </div>
  </div>
  <div class="item-1">2
    <div class="item-2">Dossier(s) ouvert(s) sans action</div>
  </div>
  <div class="item-1">3
    <div class="item-2">Dossiers non modifiés depuis 5 jours</div>
  </div>
  <div class="item-1">4
    <div class="item-2">Dossiers hors gel</div>
  </div>
  <div class="item-1">5
    <div class="item-2">Dossier(s) en cours</div>
  </div>
</div>

我使用display：flex我不确定这是否是个好问题。谢谢阅读！

Answer 1

您的代码工作正常，并且由于边距，项目之间存在空格

如果您要继续尝试从容器中删除背景并将其放在'.item-1'类中我还为每个项目添加了填充：0 10px

签出

html {
  background-color: #2d303a;
  background: #2d303a;
}

.container {
  display: flex;
  align-items: center;
  padding: 1rem;
  text-align: center;
  border-radius: 7px;
  justify-content: center;
  align-items: center;
}

.item-1 {
  color: white;
  font: bold 16px/30px "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0 20px;
  padding: 0 10px;
  background-color: #319635;
}

.bacground_color {
  background: #2d303a;
}

<div class="container">
  <div class="item-1">1
    <div class="item-2">Dossier(s) non affecté(s) </div>
  </div>
  <div class="item-1">2
    <div class="item-2">Dossier(s) ouvert(s) sans action</div>
  </div>
  <div class="item-1">3
    <div class="item-2">Dossiers non modifiés depuis 5 jours</div>
  </div>
  <div class="item-1">4
    <div class="item-2">Dossiers hors gel</div>
  </div>
  <div class="item-1">5
    <div class="item-2">Dossier(s) en cours</div>
  </div>
</div>

带有显示器的内衬：可弯曲

1 个答案: