html - 如何在圆的边缘放置图标-6ren

html - 如何在圆的边缘放置图标

转载作者：行者123 更新时间：2023-12-03 14:36:54

我想将图标放置在其父级(圆圈)的边缘，如下所示:

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

甚至 parent 也有一个圆形( border-radius: 50%; )
我不想用 margin或 position对于每个 child ，因为他们的人数是动态的。
有没有办法将 child 放在 parent 的边缘？

.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 class="circle">
  <ul class="menu">
    <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>

最佳答案

考虑使用转换。您将所有元素放在中心，然后旋转/平移它们以将它们放置在边缘。我正在使用 CSS 变量来简化代码，但这不是强制性的

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

.menu {
  list-style-type: none;
  padding: 0;
  display:grid; /* use grid */
  margin:auto; /* center the menu with all the items */
}

.menu li {
  --d:120px; /* distance from the center */
  grid-area:1/1; /* all of them at the same position (they overlap) */
  /* we rotate then translate to the edge then rotate again using the opposite rotation */
  transform:rotate(var(--r)) translateX(var(--d)) rotate(calc(-1*var(--r)));
}

/* adjust the angle for each icon */
.menu li:nth-child(1) { --r:  0deg} 
.menu li:nth-child(2) { --r: 40deg} 
.menu li:nth-child(3) { --r:-40deg}

.menu li a {
  display: block;
}
.menu li a img {
  width: 50px;
}

<div class="circle">
  <ul class="menu">
    <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>

使用 shape-outside 的另一个想法:

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

.menu {
  list-style-type: none;
  padding: 0;
  margin:0 0 0 auto;
  width:50%;
  text-align:right;
  word-spacing: 150px;
  line-height:0;
}
.menu::before {
  content:"";
  float:right;
  height:100%;
  width: 100%;
  shape-outside:radial-gradient(100% 50% at left,transparent 98%,#fff)
}

.menu li {
  display:inline-block;
}

.menu li a {
  display: block;
}
.menu li a img {
  width: 50px;
}

<div class="circle">
  <ul class="menu">
    <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>

<div class="circle">
  <ul class="menu">
    <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>
    <li>
      <a href="#instagram">
        <img src="https://img.icons8.com/cotton/344/instagram-new.png" />
      </a>
    </li>
  </ul>
</div>

如果元素数量有限，您可以优化第一个，如下所示:

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

.menu {
  --d:120px; /* distance from the center */
  --i:30deg; /* the increment */
  list-style-type: none;
  padding: 0;
  display:grid; /* use grid */
  margin:auto; /* center the menu with all the items */
}

.menu li {
  grid-area:1/1; /* all of them at the same position (they overlap) */
  /* we rotate then translate to the edge then rotate again using the opposite rotation */
  transform:rotate(var(--r)) translateX(var(--d)) rotate(calc(-1*var(--r)));
}

/* adjust the angle for each icon */
.menu li:nth-child(1) { --r: calc( 0*var(--i))} 
.menu li:nth-child(2) { --r: calc( 1*var(--i))} 
.menu li:nth-child(3) { --r: calc(-1*var(--i))} 
.menu li:nth-child(4) { --r: calc( 2*var(--i))} 
.menu li:nth-child(5) { --r: calc(-2*var(--i))} 
.menu li:nth-child(6) { --r: calc( 3*var(--i))} 
.menu li:nth-child(7) { --r: calc(-3*var(--i))} 
.menu li:nth-child(8) { --r: calc( 4*var(--i))} 
.menu li:nth-child(9) { --r: calc(-4*var(--i))} 
.menu li:nth-child(10){ --r: calc( 5*var(--i))} 
.menu li:nth-child(11){ --r: calc(-5*var(--i))} 
.menu li:nth-child(12){ --r: calc(-6*var(--i))} 

.menu li a {
  display: block;
}
.menu li a img {
  width: 50px;
}

<div class="circle">
  <ul class="menu" style="--i:50deg">
    <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>

<div class="circle">
  <ul class="menu" style="--i:20deg;--d:130px">
    <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>
    <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>

<div class="circle">
  <ul class="menu" style="--d:100px">
    <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>
     <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> <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>
     <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>
     <li>
      <a href="#chrome">
        <img src="https://img.icons8.com/cotton/344/chrome.png" />
      </a>
    </li>
  </ul>
</div>

以上涵盖了多达 12 个图标，您可以轻松扩展到代码以涵盖更多。那么你要做的就是调整变量 i和 d另一种配置:

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

.menu {
  --d:120px; /* distance from the center */
  --i:30deg; /* the increment */
  list-style-type: none;
  padding: 0;
  display:grid; /* use grid */
  margin:auto; /* center the menu with all the items */
}

.menu li {
  grid-area:1/1; /* all of them at the same position (they overlap) */
  /* we rotate then translate to the edge then rotate again using the opposite rotation */
  transform:rotate(var(--r)) translateX(var(--d)) rotate(calc(-1*var(--r)));
}

/* adjust the angle for each icon */
.menu li:nth-child(1) { --r: calc( 0*var(--i))} 
.menu li:nth-child(2) { --r: calc( 1*var(--i))} 
.menu li:nth-child(3) { --r: calc( 2*var(--i))} 
.menu li:nth-child(4) { --r: calc( 3*var(--i))} 
.menu li:nth-child(5) { --r: calc( 4*var(--i))} 
.menu li:nth-child(6) { --r: calc( 5*var(--i))} 
.menu li:nth-child(7) { --r: calc( 6*var(--i))} 
.menu li:nth-child(8) { --r: calc( 7*var(--i))} 
.menu li:nth-child(9) { --r: calc( 8*var(--i))} 
.menu li:nth-child(10){ --r: calc( 9*var(--i))} 
.menu li:nth-child(11){ --r: calc(10*var(--i))} 
.menu li:nth-child(12){ --r: calc(11*var(--i))} 

.menu li a {
  display: block;
}
.menu li a img {
  width: 50px;
}

<div class="circle">
  <ul class="menu" style="--i:50deg">
    <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>

<div class="circle">
  <ul class="menu" style="--i:20deg;--d:130px">
    <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>
    <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>

<div class="circle">
  <ul class="menu" style="--d:100px">
    <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>
     <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> <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>
     <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>
     <li>
      <a href="#chrome">
        <img src="https://img.icons8.com/cotton/344/chrome.png" />
      </a>
    </li>
  </ul>
</div>

通过调整 nth-child您控制元素放置方式的逻辑。

关于html - 如何在圆的边缘放置图标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66930181/

文章推荐： c++ - std::async 的非阻塞调用:这个版本有多危险？

文章推荐： php - 使用 PHP 拆分 URL

文章推荐： google-chrome - 删除 Chrome input=time 中的秒数

文章推荐： javascript - 如何使用 Ajax 添加更多过滤器和寻呼机

ruby - 为什么这个声明是这样的？ (放置 ("here") && 中断) vs (放置 "here"&& 中断)
语句 1: [2,4,6,7,8].each do |i| (i % 2 == 0) || (puts "Not even" && break) puts i end 声明 2: [2
flutter - SingleChildScrollView无法正常工作？放置？
我有一张正在显示的卡片，上面有一些信息。我想将其包装在SingleChildScrollView中，因为我还有更多项目要添加到卡中，但是当我这样做时，屏幕只是空白吗？我曾尝试将其作为根(脚手架主体)放
wpf - 放置/添加新实体的位置应该放在新的ViewModel中吗？
我有一个带有窗体的 View ，该窗体显示ViewModel中ObservableCollection中对象的数据。 ObservableCollection使我可以浏览数据。 ObservableC
hadoop - 放置:意外的URISyntaxException
如何将时间戳附加文件名放在HDFS中？ hadoop fs -put topic_2018-12-15%2016:31:15.csv /user/file_structure/ 最佳答案您只是在运行
Emacs——放置/删除覆盖的运行时间增加了每次运行
我正在寻求一些帮助，以找出为什么以下叠加函数的运行时间会随着每次连续运行而增加。据我所知，如果缓冲区中的文本保持不变，则运行时间应该是相同的——即，仅向左/向右移动光标应该不会增加运行时间(但它确实
swift - 放置 UIActivityIndicatorView
我有一个事件指示器，它显示在中间。如何将其放置在 View 的左上角？ var activityIndicator = UIActivityIndicatorView() func show() {
C++放置 'const'麻烦。
首先，我想提前感谢所有回答这个问题的人。非常感谢您的帮助。这是我第一次在这里发帖，所以如果我发帖不礼貌，请原谅我。我的问题是关于方法原型(prototype)的: void copySubtree(
ios - UIPopoverController 放置
我正在开发一个应该是通用的应用程序，一个适用于 iPad 和 iPhone 的应用程序。我想让他们的界面尽可能相似。在 iPhone 应用程序中，我使用的是选项卡栏 Controller ，其中一个选
javascript - 放置、修补和删除不会返回错误
我目前正在使用 JS 开发 REST API，但遇到以下问题:该代码有效，但如果我尝试删除、放置或修补不存在的条目，它不会返回错误，但会打印成功消息。这是为什么？获取路由完美运行。 app.route
HTML block 放置
.a{ width:500px; height:500px; background:yellow; border: 3px dashed black; }
CSS div 放置
首先，请引用下图: 这基本上是我对布局的想法。我想要的是: 内容 div 成为“主要焦点”，例如当浏览器调整大小，它应该留在中间；当浏览器被调整大小时，我希望这两个图像基本上位于内容 div
java - 内存映射文件是否支持并发获取/放置？
我的应用程序需要使用内存映射并发访问数据文件。我的目标是使其在共享内存系统中可扩展。研究了内存映射文件库实现的源码，想不通: 在多个线程中从 MappedByteBuffer 中读取是否合法？ get
java - JDesktopPane 放置
我有一个 JDesktopPane 并希望以网格样式显示 JInternalFrames 而无需覆盖框架。框架的尺寸会有所不同，因此应动态分配它们的位置。我可以存储最后放置的框架的坐标，但可以移动、最
c++ - 放置-新地址对齐
根据https://isocpp.org/wiki/faq/dtors#placement-new传递给placement-new的地址必须正确对齐。但它给出的例子似乎与此相矛盾。 char memo
c - 函数的 int 放置
我最近一直在查看 Illumos 源代码，发现了一些奇怪的东西。在他们的源代码中，函数类型是这样写的: static int outdec64(unsigned char *out, unsigne
html - CSS 放置，图例旁边的图像
您好，我目前正在尝试在我的一张图片旁边放置一个图例，但我在放置时遇到了问题。我想将图例放在图像的左侧或右侧。这是我当前的代码: .my-legend .legend-title { text-a
string - 打印、放置、说出和转义字符
根据文档， print 之间的唯一区别和 say 似乎是后者添加了 "\n"(并使用 .gist 进行字符串化)。然而， perl6 -e 'print "del\b\b"' 打印“d”，有效地应用转
Flutter:放置 Logo 图像后背景变为一半
所以我试图将我的图像标志放在背景上，但我的背景突然被裁剪，出现了一半的黑屏。如图: 我的 main.dart 代码: import 'package:flutter/material.dart'; i
Azure DevOps如何在发布构建管道后获取输出(放置)文件夹中的文件名
我正在使用 Azure DevOps 构建 python 轮。我想让它尽可能通用，以便团队中的每个人都可以使用相同的管道来构建自己的 python 轮并将它们部署在一些 databricks 工作区中
WordPress 中的 Javascript 放置
在构建标准(非 WordPress)网页时，我通常会在正文末尾之前加载所有 javascript 文件，然后包含页面特定 js 代码的部分。 WorPress 建议使用 wp_enqueue_scri

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 如何在圆的边缘放置图标