我正在寻找帮助我的css代码,使列表看起来像下面的图像在中心(蓝色圆圈)。
我从未做过这样的事情,所以我不知道如何编码它就是我来这里的原因。提前谢谢!
答案 0 :(得分:1)
就个人而言,我会用javascript来完成这个,但如果你想了解更多关于css基础知识的话,这是一个很好的练习。这是绝对定位的一个非常基本的例子。
#outerCircle{
width:100px;
height:100px;
position:Absolute;
top:50%;
left:10%;
transform:translate(0,-50%);
border:2px solid black;
border-radius:50%;
}
#innerCircle{
background:darkslategrey;
width:80%;
height:80%;
margin:auto;
margin-top:-5px;
border-radius:50%;
}
#floatingElements li{
list-style-type:none;
height:10px;
width:10px;
border-radius:50%;
background:red;
position:absolute;
}
#floatingElements li:nth-child(1){
top:5px;
right:15px;
}
#floatingElements li:nth-child(2){
top:25px;
right:-1px;
}
#floatingElements li:nth-child(3){
top:55px;
right:-5px;
}
#floatingElements li:nth-child(4){
top:80px;
right:7px;
}
<div id="outerCircle">
<div id="innerCircle">
<ul id="floatingElements">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
答案 1 :(得分:1)
我建议检查兼容性问题,但如果您放弃<ul>
(至少我无法使列表正常运行),您可以实现类似的功能,并且可以使用shape-outside
.wrapper .circle {
float: left;
border-radius: 50%;
-webkit-shape-outside:circle();
shape-outside:circle();
margin-right: 25px;
}
.wrapper .circle-list p {
margin: 6px 0;
}
.wrapper .circle-list p:before {
content: "\2022\A0";
}
<div class="wrapper">
<img src="http://placehold.it/150x150/" class="circle" />
<div class="circle-list">
<p>This is a line of text</p>
<p>This is also a line of text</p>
<p>Oh my God the lines they won't stop!</p>
<p>Run you fool! They are coming!</p>
<p>It's too late! They know where you are!</p>
</div>
</div>
基本上我们只使用.circle-list
元素来复制带有:before
伪类的列表样式行为以插入项目符号和空格。除此之外,它正在利用shape-outside
来创建一个简单的循环包装器。
答案 2 :(得分:0)
这是一个简单的解决方案,尽管它使用了所有“魔法”数字。如果您计划在整个网站中使用多个尺寸和位置,则应该计算出每个列表项的位置。
https://jsfiddle.net/5db8oLL6/
<ul class="list">
<li class="list__item">Item</li>
<li class="list__item">Item</li>
<li class="list__item">Item</li>
<li class="list__item">Item</li>
</ul>
.list {
position: relative;
width: 80px;
height: 80px;
border-radius: 50%;
background-color: blue;
box-shadow: 0 0 0 10px #fff,
0 0 0 11px #333;
}
.list__item {
position: absolute;
}
.list__item:nth-child(1) {
top: -10px;
right: -35px;
}
.list__item:nth-child(2) {
top: 12px;
right: -52px;
}
.list__item:nth-child(3) {
top: 43px;
right: -53px;
}
.list__item:nth-child(4) {
top: 70px;
right: -35px;
}