已解決-垂直拉伸以填充彎曲方向內的空間：列-有解無憂

我有一個物品清單

<ul>
   <li>Item1</li>
   <li>Item2</li>
   <li>Item3</li>
</ul>

ul 元素的樣式是我想要的

但是，無論我在 li 元素上嘗試什么，li 專案都無法拉伸以適應

我嘗試過對其應用拉伸，我什至嘗試將 li 元素的高度設定為 calc(85vh / 6) 因為里面有 6 個元素

由于這是導航的一部分，因此 li 元素必須準確（容器大小 / 6）至關重要，并且 li 元素包含需要在樹的下方進一步排列的絕對元素

ul{
    display:flex;
    flex-direction: column;
    position:absolute;
    margin-top:15vh;
    height:85vh;
    background-color:#FFF;
    padding:5vmin;
    width:50%;
  }
ul > li{
    align-self: stretch;
  }

哦，這必須是 CSS-only

注意下面的粉紅色區域，檢查時應該都是白色的（沒有空格）

已解決 - 垂直拉伸以填充彎曲方向內的空間：列

有誰知道我哪里出錯了？

編輯：@nemus，感謝您的出色回答-我可以在您的 codepen 中看到它，但由于某種原因它不適用于我的專案，我無法解決

已解決 - 垂直拉伸以填充彎曲方向內的空間：列

編輯：好的，所以我做了一個愚蠢的！ul 根據移動設備或桌面從 grid 更改為 flex，它仍然具有 grid-gap 屬性！如果有人看到這個并且有同樣的問題，請檢查你沒有網格間隙！

uj5u.com熱心網友回復：

問候，我假設您想<li>在<ul>. 如果您為您定義了高度，您<ul>可以height: calc(100% / 6)使用<li>

示例：https ://codepen.io/nemuss/pen/abLrMqO

uj5u.com熱心網友回復：

您需要justify-content申請ul

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

ul {
  display: flex;
  flex-direction: column;
  position: absolute;
  height: 85vh;
  background-color: #FFF;
  padding: 5vmin;
  width: 50%;
  list-style: none;
  border: 1px solid red;
  justify-content: space-between;
}

ul>li {
  border: 1px solid green;
  flex: 1;
  margin-bottom: 1em;
}

<ul>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
</ul>

uj5u.com熱心網友回復：

ul{
    display:flex;
    list-style-type: none;
    justify-content: space-between;
    flex-direction: column;
    margin-top:15vh;
    height: 35em;
    background-color:#FFF;
    padding:5vmin;
    width:50%;
    border: solid;
  }
ul > li{
      text-align: center;
    padding: 20px;
    background-color: red;
    border: solid;
  }

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/416927.html

標籤：

上一篇：為什么容器流體在右側留下空白區域

下一篇：引導程式中的部分相互沖突