試圖在每個progress-container div的上方創建一條垂直的虛線，該虛線位于頂部的正中央并跨越整個可能的高度。我設法創建類似東西的唯一方法是添加一個左邊界，但顯然這不是居中的。
這是一個簡化的演示，每個輸入/圖示都代表一個已渲染的 React 組件，因此使用純 CSS 是我的理想方案。
。span class="hljs-selector-class">.wrapperDiv {
display: flex;
flex-direction: 行。
align-items: center;
}
.progress-container {
height: 22px;
width: 22px;
margin-right: 16px;
background-color: 紅色。
display: flex;
}
.input-wrapper {
border: 1px solid #ced4da;
border-radius: 2px;
overflow-y: hidden;
padding: 0.375rem 1.75rem 0.375rem 0.75rem。
}<div class="wrapperDiv"> /span>
<div class="progress-tainer"> </div>>
<div class="input-wrapper">/span>
<div class="input"> 我的第一個輸入在這里</input>。
</div>/span>
</div>/span>
uj5u.com熱心網友回復：
用絕對定位的pseudo-elements來處理這種行為，這樣你就不必與元素的自然檔案流打交道。
使用CSS 計數器來以編程方式處理遞增邏輯。
。/* BEM命名規則，用于保持選擇器的平坦 */
.progress-wrapper {
counter-reset: step; /* 設定一個名為'step'的計數器，其初始值為0。
}
.progress-step {
display: flex;
flex-direction: 行。
align-items: center;
position: relative;
}
.progress-step: :after {
content: "";
display: block;
position: absolute;
width: 2px;
left: 11px; /* 相對于標記的寬度 */。
top: 5px; /* 偏移頂部 */
height: 100%; /*回應高度 */
margin: auto;
border-left: 2px 虛線黑色。
z-index: -1; /* handle stacking context */
}
.progress-step-no-step::after { /* 處理最后一個例外，而不是每個實體 */
display: none;
}
.progress-step__marker {
height: 22px;
width: 22px;
margin-right: 16px;
background-color: 紅色。
display: flex;
}
.progress-step__marker: :before {
counter-increment: step; /*將部分計數器的值增加1 */。
content: 計數器(step); /* 顯示遞增的計數器值 */
text-align: center;
width: 100%;
line-height: 22px; /* 相對于標記高度 */。
}
.input-wrapper {
border: 1px solid #ced4da;
border-radius: 2px;
overflow-y: hidden;
padding: 0.375rem 1.75rem 0.375rem 0.75rem。
}
.input-wrapper--large {
height: 200px;
}<div class="progress-wrapper">
<div class="progress-step"/span>>
<div class="progress-step__marker"/span>> </div>>
<div class="input-wrapper">/span>
<div class="input-wrapper__input"/span>> 我在這里有我的第一個輸入</div>。
</div>/span>
</div>/span>
<div class="progress-step">
<div class="progress-step__marker"/span>> </div>>
<div class="input-wrapper input-wrapper--large"/span>>
<div class="input-wrapper__input"/span>> 我在這里有我的第二個輸入</div>。
</div>/span>
</div>/span>
<div class="progress-step progress-step--no-step" >
<div class="progress-step__marker"/span>> </div>>
<div class="input-wrapper">/span>
<div class="input-wrapper__input"/span>> 我在這里有我的第三個輸入</div>。
</div>/span>
</div>/span>
</div>/span>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/306768.html
標籤：