操縱元素之間的間距

我正在均勻地使用空間/空間之間的空間來嘗試使元素之間的間距相等，并且效果很好。我想要做的是在均勻分割它們之后減少它們之間的空間。我找不到任何可行的解決方案。我嘗試過 line-height 和操縱邊距，但沒有用。是否可以在均勻間隔元素后減小尺寸？如果沒有什么是均勻間隔元素并控制它們的間距的正確方法。任何幫助表示贊賞。提前致謝。

注意：我希望專案向右或向左浮動而不居中！

此外，這是我能找到的唯一 SO 鏈接：How to reduce space between items in flexbox justify-content: space-between

.leftHeaderItems {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  position: absolute;
  right: 0%;
  width: 100%;
  height: 7%;
  margin: 0px;
  background: green;
}

<div class="leftHeaderItems">
  <p>Item 1</p>
  <p>Item 2</p>
  <p>Item 3</p>
  <p>Item 4</p>
  <p>Item 5</p>
</div>

更新： 另外，按照@mianbato 的建議嘗試了 gap 屬性，我無法弄清楚如何在一行中設定專案，而不是在列中設定專案。

.leftHeaderItems {
  display: grid;
  justify-content: space-evenly;
  align-items: center;
  position: absolute;
  left: 0%;
  width: 30%;
  height: 100%;
  grid-row-gap: 3px;
  background: inherit;
}

<div class="leftHeaderItems">
  <p>Item 1</p>
  <p>Item 2</p>
  <p>Item 3</p>
  <p>Item 4</p>
  <p>Item 5</p>
</div>

uj5u.com熱心網友回復：

當您使用space-evenly這意味著您希望瀏覽器為您計算和應用距離。

如果您想控制專案之間的空間，請使用column-gap。

您可以使用align-content容器元素控制水平對齊方式：

.leftHeaderItems {
  background: green;
  display: flex;
  column-gap: 12px;
  flex-direction: row;
}

<div class="leftHeaderItems">
    <p>Item 1</p>
    <p>Item 2</p>
    <p>Item 3</p>
    <p>Item 4</p>
    <p>Item 5</p>
</div>

uj5u.com熱心網友回復：

您可以嘗試使用display: grid然后調整grid-gap我設定的間距12px

.leftHeaderItems {
  align-items: center;
  position: absolute;
  right: 0%;
  width: 100%;
  height: auto;
  margin: 0px;
  background: green;
  justify-content: center;
  grid-column: 1 / -1;
  display: grid;
  grid-gap: 12px;
  grid-template-columns: repeat(5, auto);
  flex-direction: column;
  margin: 0;
}

<div class="leftHeaderItems">
    <p>Item 1</p>
    <p>Item 2</p>
    <p>Item 3</p>
    <p>Item 4</p>
    <p>Item 5</p>
</div>

uj5u.com熱心網友回復：

使用 display flex 和 gap 屬性

.leftHeaderItems{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap:1rem;
  height: 7%;
  padding-left: 1rem;
  background: green;
  }

<div class="leftHeaderItems">
  <p>Item 1</p>
  <p>Item 2</p>
  <p>Item 3</p>
  <p>Item 4</p>
  <p>Item 5</p>
</div>

uj5u.com熱心網友回復：

您可以使用 'justify-content: center' 然后使用 'flex-basis: [some-value]' 來調整您的需要；

.leftHeaderItems {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-basis: 0;
  position: absolute;
  right: 0%;
  width: 100%;
  height: 7%;
  margin: 0px;
  background: green;
}

.leftHeaderItems > p {
  flex-basis: 90px;
}

uj5u.com熱心網友回復：

如果要在對父元素均勻使用 / 空間之間的空間后編輯 clild 元素的邊距值，則應將邊距分配給子元素，而不是父元素。

.leftHeaderItems {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  right: 0%;
  width: 100%;
  height: 7%;
  background: green;
}
.leftHeaderItems > p {
  margin : auto 10px; 
}

標籤：javascript html css

上一篇：按揭計算器/我可以借多少錢

下一篇：遍歷過濾后的陣列