将使用 :before & :after 创建的 div 与其他元素水平对齐
Aligning a div created using :before & :after horizontally to other elements
我正在使用 :before
创建一个黑色圆圈(它应该显示白色文本恰好居中,无法弄清楚为什么它不是白色)和 :after
显示虚线线(如图所示)。我希望黑色圆圈(里面有文字)与输入水平放置,但我一直遇到问题,因为它也在它和后面的虚线之间产生了很大的差距。我玩过边距,但我不想将元素推得太远。
.progress-container {
display: flex;
position: relative;
}
.progress-indicator {
position: relative;
display: inline-block;
margin-bottom: 40px;
color: #fff;
}
.progress-indicator::before {
content: "";
width: 22px;
height: 22px;
background: #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
}
.progress-indicator::after {
content: "";
height: 85px;
border: 2px dashed #a9b4b8;
position: absolute;
left: 50%;
top: 49px;
transform: translateX(-50%);
margin-bottom: 10px;
}
.input-container {
display: flex;
align-items: center;
}
.input-wrapper {
border: 1px solid #ced4da;
border-radius: 2px;
overflow-y: hidden;
padding: 0.375rem 1.75rem 0.375rem 0.75rem;
margin-left: 30px;
}
<div class=progress-container>
<div class="progress-indicator">1</div>
<div class="input-container">
<div class="input-wrapper">
<div>Input</div>
</div>
</div>
</div>
注意:您的 .progess-container
选择器中有错字正确:.progress-container
编辑了您的 CSS:
.progress-container {
display: flex;
flex-direction: row;
align-items: center;
position: relative;
}
.progress-indicator {
position: relative;
display: inline-block;
color: #fff;
}
.progress-indicator::before {
content: "";
width: 22px;
height: 22px;
background: #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
z-index: -1;
}
.progress-indicator::after {
content: "";
height: 85px;
border: 2px dashed #a9b4b8;
position: absolute;
left: 50%;
transform: translateX(-50%);
margin-bottom: 10px;
z-index: -2;
}
.input-container {
display: flex;
align-items: center;
}
.input-wrapper {
border: 1px solid #ced4da;
border-radius: 2px;
overflow-y: hidden;
padding: 0.375rem 1.75rem 0.375rem 0.75rem;
margin-left: 30px;
}
<div class=progress-container>
<div class="progress-indicator">1</div>
<div class="input-container">
<div class="input-wrapper">
<div>Input</div>
</div>
</div>
</div>
我正在使用 :before
创建一个黑色圆圈(它应该显示白色文本恰好居中,无法弄清楚为什么它不是白色)和 :after
显示虚线线(如图所示)。我希望黑色圆圈(里面有文字)与输入水平放置,但我一直遇到问题,因为它也在它和后面的虚线之间产生了很大的差距。我玩过边距,但我不想将元素推得太远。
.progress-container {
display: flex;
position: relative;
}
.progress-indicator {
position: relative;
display: inline-block;
margin-bottom: 40px;
color: #fff;
}
.progress-indicator::before {
content: "";
width: 22px;
height: 22px;
background: #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
}
.progress-indicator::after {
content: "";
height: 85px;
border: 2px dashed #a9b4b8;
position: absolute;
left: 50%;
top: 49px;
transform: translateX(-50%);
margin-bottom: 10px;
}
.input-container {
display: flex;
align-items: center;
}
.input-wrapper {
border: 1px solid #ced4da;
border-radius: 2px;
overflow-y: hidden;
padding: 0.375rem 1.75rem 0.375rem 0.75rem;
margin-left: 30px;
}
<div class=progress-container>
<div class="progress-indicator">1</div>
<div class="input-container">
<div class="input-wrapper">
<div>Input</div>
</div>
</div>
</div>
注意:您的 .progess-container
选择器中有错字正确:.progress-container
编辑了您的 CSS:
.progress-container {
display: flex;
flex-direction: row;
align-items: center;
position: relative;
}
.progress-indicator {
position: relative;
display: inline-block;
color: #fff;
}
.progress-indicator::before {
content: "";
width: 22px;
height: 22px;
background: #000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
z-index: -1;
}
.progress-indicator::after {
content: "";
height: 85px;
border: 2px dashed #a9b4b8;
position: absolute;
left: 50%;
transform: translateX(-50%);
margin-bottom: 10px;
z-index: -2;
}
.input-container {
display: flex;
align-items: center;
}
.input-wrapper {
border: 1px solid #ced4da;
border-radius: 2px;
overflow-y: hidden;
padding: 0.375rem 1.75rem 0.375rem 0.75rem;
margin-left: 30px;
}
<div class=progress-container>
<div class="progress-indicator">1</div>
<div class="input-container">
<div class="input-wrapper">
<div>Input</div>
</div>
</div>
</div>