寻找列表的css帮助（ul li）

Question

我正在寻找帮助我的css代码，使列表看起来像下面的图像在中心（蓝色圆圈）。

我从未做过这样的事情，所以我不知道如何编码它就是我来这里的原因。提前谢谢！

Answer 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>
    
    

Answer 2

我建议检查兼容性问题，但如果您放弃<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来创建一个简单的循环包装器。

Answer 3

这是一个简单的解决方案，尽管它使用了所有“魔法”数字。如果您计划在整个网站中使用多个尺寸和位置，则应该计算出每个列表项的位置。

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;
}