我得到以下輸入結構：
css
.form-content {
clear: both;
width: 100%;
.form-flex-col-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
.form-flex-col-content {
flex: 1 1 32%;
padding: 0 10px;
}
}
}
html
<div class="form-flex-col-container">
<div class="form-flex-col-content">
... my input
</div>
<div class="form-flex-col-content">
... my input
</div>
<div class="form-flex-col-content">
... my input
</div>
<div class="form-flex-col-content">
... my input
</div>
<div class="form-flex-col-content">
... my input
</div>
</div>
它渲染得很好。但是，我想引入一個新標簽來“分組”我的.form-flex-col-content塊（以提供角度 formControl 指令）。像這樣 ：
<div class="form-flex-col-container">
<span [formGroup]="myFormA">
<div class="form-flex-col-content">
... my input
</div>
<div class="form-flex-col-content">
... my input
</div>
<div class="form-flex-col-content">
... my input
</div>
</span>
<span [formGroup]="myFormB">
<div class="form-flex-col-content">
... my input
</div>
<div class="form-flex-col-content">
... my input
</div>
</span>
</div>
但它破壞了柔性顯示。
有沒有我可以使用的不會破壞柔性顯示的標簽/樣式？
干杯！
uj5u.com熱心網友回復：
您可以添加display: contents到<span>包裝內容的內容中，以使其對布局有效透明，盡管這確實帶有可訪問性警告，不幸的是：
*, ::before, ::after {
box-sizing: border-box;
font: normal 1rem / 1.5 sans-serif;
margin: 0;
padding: 0;
}
.form-flex-col-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
outline: 2px solid #f90;
}
.form-flex-col-container span {
display: contents;
}
.form-flex-col-content {
flex: 1 1 32%;
padding-block: 10px;
outline: 2px solid palegreen;
}<div class="form-flex-col-container">
<span [formGroup]="myFormA">
<div class="form-flex-col-content">
... my input
</div>
<div class="form-flex-col-content">
... my input
</div>
<div class="form-flex-col-content">
... my input
</div>
</span>
<span [formGroup]="myFormB">
<div class="form-flex-col-content">
... my input
</div>
<div class="form-flex-col-content">
... my input
</div>
</span>
</div>JS 小提琴演示。
這些元素本身不會產生特定的盒子。它們被它們的偽盒子和它們的子盒子所取代。請注意，CSS Display Level 3 規范定義了內容值應如何影響“不尋常元素”——不是純粹由 CSS 框概念呈現的元素，例如替換元素。請參閱附錄 B：顯示效果：有關例外元素的內容以獲取更多詳細資訊。
由于瀏覽器中的錯誤，目前這將從可訪問性樹中洗掉元素——螢屏閱讀器不會查看里面的內容。有關更多詳細資訊，請參閱下面的可訪問性問題部分。參考：https ://developer.mozilla.org/en-US/docs/Web/CSS/display#box
參考：
display.
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/416916.html
標籤：
上一篇：畫布矩陣影片JS