如何在圆的边缘放置图标

html5 • • 问答

我想将图标放置在其父级（圆圈）的边缘，如下所示：

我尝试了一些方法，但默认情况下绝对子级放置在其父级的起始位置，如下所示：

甚至父级也有一个圆形 ( border-radius: 50%;)

我不想使用margin或position为每个孩子，因为他们的数量是动态的。

有没有办法将孩子放在父母的边缘？

.circle {
  position: relative;
  width: 300px;
  height: 300px;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  border-radius: 50%;
}

.menu {
  list-style-type: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  margin: 0;
  position: absolute;
  right: 5px;
}

.menu li {
  margin: 5px 0;
}

.menu li a {
  display: block;
}

.menu li a img {
  width: 50px;
}
<div>
  <ul>
    <li>
      <a href="#instagram">
        <img src="https://img.icons8.com/cotton/344/instagram-new.png" />
      </a>
    </li>
    <li>
      <a href="#chrome">
        <img src="https://img.icons8.com/cotton/344/chrome.png" />
      </a>
    </li>
    <li>
      <a href="#youtube">
        <img src="https://img.icons8.com/cotton/344/youtube.png" />
      </a>
    </li>
  </ul>
</div>
以上是如何在圆的边缘放置图标的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>
相关内容