gpt4 book ai didi

html - 在 CSS 中使两个圆圈位于垂直线的顶部

转载 作者:行者123 更新时间:2023-12-03 17:10:55 26 4
gpt4 key购买 nike

我想让线条顶部的橙色和蓝色圆圈介于两者之间。

.content-wrap {
border-left: 1px dashed black;
height: 5em;
position: absolute;
}

.content-wrap::before {
position: absolute;
top: calc(50% - 1px);
right: 0;
left: 0;
Content: "";
border: none;
height: 2px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="content-wrap">
<font-awesome-icon class="icon1" fixed-width icon="dot-circle" />
<font-awesome-icon class="icon2" fixed-width icon="map-marker-alt" />
</div>

电流输出:
Refer to the above image
期望输出:
enter image description here

最佳答案

我之前没有使用过::效果。看看这是否有帮助。

.content-wrap {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: min-content;
margin: 0 auto;
padding: 2rem;
border-radius: 0.25rem;
background: #3e3e3e;
}

.circle {
color: pink;
font-size: 1.25rem;
}

.dotted {
border-left: 0.125rem dashed #f0f0f0;
height: 8rem;
}

.marker {
color: lightblue;
font-size: 1.25rem;
}
<script src="https://kit.fontawesome.com/a076d05399.js"></script>

<body>
<div class="content-wrap">
<i class="fas fa-dot-circle circle"></i>
<div class="dotted"></div>
<i class="fa fa-map-marker marker" aria-hidden="true"></i>
</div>
</body>

关于html - 在 CSS 中使两个圆圈位于垂直线的顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63554046/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com