為什么我必須display:block專案以便它們在彈性框中相互對齊？-有解無憂

下面的 CSS 代碼應該使表單的每個專案都在一個列中，例如，一個在另一個之下，但除非我添加代碼，否則它不起作用：

input {
    display:block;
}

為什么會發生這種情況，我如何僅使用#flex規則塊來實作？

    * {
        box-sizing: border-box;
        margin: 0;
        padding:0
    }
    
    #flex {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        align-content: center;
        justify-items: center;
        height: 90vh;
    }

<div id='flex'>
      <form id='something'>
                <input type='email' />
                <input type='password' />
                <button>Entrar</button>
            </form>
            </div>

uj5u.com熱心網友回復：

您的#flex元素只有一個子元素: #something，因此 flex 設定幾乎沒有效果，它們絕對不會影響孫子元素input和button，而只會影響直接子元素 ( #something)。將您的設定應用于#something- 這將產生您所要求的效果，因為它會影響的直接子級#something：

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

#something {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  justify-items: center;
  height: 90vh;
}

<div id='flex'>
  <form id='something'>
    <input type='email' />
    <input type='password' />
    <button>Entrar</button>
  </form>
</div>

uj5u.com熱心網友回復：

除了約翰內斯的回答，您可以通過制作#something 表單來制作#flex div 的輸入和按鈕彈性專案 display:contents

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

#something {
    display:contents;
}
    
#flex {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    justify-items: center;
    height: 90vh;
}

<div id='flex'>
  <form id='something'>
      <input type='email' />
      <input type='password' />
      <button>Entrar</button>
  </form>
</div>

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

標籤：

上一篇：運行一個簡單的js函式后HTML代碼消失

下一篇：如何將漸變應用于顏色而不是純色值