<分区>
关闭 9 年前。
- 要求提供代码的问题必须表现出对所解决问题的最低限度的理解。包括尝试过的解决方案、为什么它们不起作用，以及预期结果。另请参阅:Stack Overflow question checklist
- 关于您编写的代码问题的问题必须在问题本身中描述具体问题 — 并且包括有效代码 以重现它。参见 SSCCE.org寻求指导。
<分区>
关闭 9 年前。
我想在我的网站底部显示一条线，底部有三个圆圈，第一个在左边，第二个在中间，第三个在右边。我怎么能用 CSS 做到这一点？
最佳答案
这是我用 CSS 制作的，
CSS
.lineB {
height: 60px;
width: 100%;
position: relative;
top: 50px;
}
.lineL {
height: 2px;
background: #2b2b2b;
width: 45%;
top: 25px;
left: 0;
position: absolute;
display: block;
}
.lineR {
height: 2px;
background: #2b2b2b;
width: 45%;
top: 25px;
right: 0;
position: absolute;
display: block;
}
.circles {
width: 118px;
margin: 0 auto;
}
.circle {
width: 2em;
height: 2em;
display: inline-block;
border-radius: 50%;
border: 1px solid #2b2b2b;
}
.C {
width: 2.5em;
height: 2.5em;
}
HTML
<div class="lineB">
<span class="lineL"></span>
<span class="lineR"></span>
<div class="circles">
<span class="circle"></span>
<span class="circle C"></span>
<span class="circle"></span>
</div>
这是 JSFIDDLE这将显示它的外观。
我强烈建议您只制作SVG(可缩放矢量图形)图像以获得更好的灵 active 。
SVG 图像文件非常灵活，可以在任何屏幕尺寸上拉伸(stretch)。
关于html - 我如何使用 CSS 编写一个条形图，其中 3 个圆圈在条形图上均匀分布？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19870701/