如何在圆的边缘放置图标 [英] How to place icons at the edge of circle

查看：44
本文介绍了如何在圆的边缘放置图标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

即使父对象也有一个圆形(border-radius: 50%;)

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

有没有什么办法可以将孩子放在父母的边缘?

.circle {位置:相对；宽度:300px；高度:300px；背景:rgba(0, 0, 0, 0.2);显示:弹性；对齐项目:居中；边界半径:50%；}.菜单 {列表样式类型:无；显示:弹性；弹性方向:列；对齐内容:居中；填充:0；边距:0；位置:绝对；右:5px；}.menu li {边距:5px 0；}.menu li a {显示:块；}.menu li a img {宽度:50px；}

<ul class="菜单"><li><a href="#instagram"><img src="https://img.icons8.com/cotton/344/instagram-new.png"/></a><li><a href="#chrome"><img src="https://img.icons8.com/cotton/344/chrome.png"/></a><li><a href="#youtube"><img src="https://img.icons8.com/cotton/344/youtube.png"/></a>

解决方案

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

.circle {宽度:300px；高度:300px；背景:rgba(0, 0, 0, 0.2);显示:弹性；边界半径:50%；}.菜单 {列表样式类型:无；填充:0；显示:网格；/* 使用网格 */保证金:自动；/* 将菜单与所有项目居中 */}.menu li {--d:120px;/* 到中心的距离 */网格区域:1/1；/* 他们都在同一个位置(他们重叠) *//* 我们旋转然后平移到边缘，然后使用相反的旋转再次旋转 */变换:旋转(var(--r))translateX(var(--d))旋转(calc(-1*var(--r)))；}/* 调整每个图标的角度 */.menu li:nth-child(1) { --r: 0deg}.menu li:nth-child(2) { --r: 40deg}.menu li:nth-child(3) { --r:-40deg}.menu li a {显示:块；}.menu li a img {宽度:50px；}

<ul class="菜单"><li><a href="#instagram"><img src="https://img.icons8.com/cotton/344/instagram-new.png"/></a><li><a href="#chrome"><img src="https://img.icons8.com/cotton/344/chrome.png"/></a><li><a href="#youtube"><img src="https://img.icons8.com/cotton/344/youtube.png"/></a>

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

.circle {宽度:300px；高度:300px；背景:rgba(0, 0, 0, 0.2);显示:inline-flex；边界半径:50%；}.菜单 {列表样式类型:无；填充:0；边距:0 0 0 自动；宽度:50%；文本对齐:右；字间距:150px；行高:0;}.menu::before {内容:"";浮动:右；高度:100%；宽度:100%；shape-outside:radial-gradient(100% 50% at left,transparent 98%,#fff)}.menu li {显示:内联块；}.menu li a {显示:块；}.menu li a img {宽度:50px；}

<ul class="菜单"><li><a href="#instagram"><img src="https://img.icons8.com/cotton/344/instagram-new.png"/></a><li><a href="#chrome"><img src="https://img.icons8.com/cotton/344/chrome.png"/></a><li><a href="#youtube"><img src="https://img.icons8.com/cotton/344/youtube.png"/></a>
<div class="circle"><ul class="菜单"><li><a href="#instagram"><img src="https://img.icons8.com/cotton/344/instagram-new.png"/></a><li><a href="#chrome"><img src="https://img.icons8.com/cotton/344/chrome.png"/></a><li><a href="#youtube"><img src="https://img.icons8.com/cotton/344/youtube.png"/></a><li><a href="#instagram"><img src="https://img.icons8.com/cotton/344/instagram-new.png"/></a>

如果元素数量有限，您可以像下面这样优化第一个:

.circle {宽度:300px；高度:300px；背景:rgba(0, 0, 0, 0.2);显示:inline-flex；边界半径:50%；}.菜单 {--d:120px;/* 到中心的距离 */--i:30d​​eg;/* 增量 */列表样式类型:无；填充:0；显示:网格；/* 使用网格 */保证金:自动；/* 将菜单与所有项目居中 */}.menu li {网格区域:1/1；/* 他们都在同一个位置(他们重叠) *//* 我们旋转然后平移到边缘，然后使用相反的旋转再次旋转 */变换:旋转(var(--r))translateX(var(--d))旋转(calc(-1*var(--r)))；}/* 调整每个图标的角度 */.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 {显示:块；}.menu li a img {宽度:50px；}

<ul class="menu" style="--i:50deg"><li><a href="#instagram"><img src="https://img.icons8.com/cotton/344/instagram-new.png"/></a><li><a href="#chrome"><img src="https://img.icons8.com/cotton/344/chrome.png"/></a><li><a href="#youtube"><img src="https://img.icons8.com/cotton/344/youtube.png"/></a>
<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><a href="#chrome"><img src="https://img.icons8.com/cotton/344/chrome.png"/></a><li><a href="#youtube"><img src="https://img.icons8.com/cotton/344/youtube.png"/></a><li><a href="#instagram"><img src="https://img.icons8.com/cotton/344/instagram-new.png"/></a><li><a href="#chrome"><img src="https://img.icons8.com/cotton/344/chrome.png"/></a><li><a href="#youtube"><img src="https://img.icons8.com/cotton/344/youtube.png"/></a>

<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><a href="#chrome"><img src="https://img.icons8.com/cotton/344/chrome.png"/></a><li><a href="#youtube"><img src="https://img.icons8.com/cotton/344/youtube.png"/></a><li><a href="#instagram"><img src="https://img.icons8.com/cotton/344/instagram-new.png"/></a><li><a href="#chrome"><img src="https://img.icons8.com/cotton/344/chrome.png"/></a><li><a href="#youtube"><img src="https://img.icons8.com/cotton/344/youtube.png"/></a><li><a href="#instagram"><img src="https://img.icons8.com/cotton/344/instagram-new.png"/></a><li><a href="#chrome"><img src="https://img.icons8.com/cotton/344/chrome.png"/></a><li><a href="#youtube"><img src="https://img.icons8.com/cotton/344/youtube.png"/></a><li><a href="#chrome"><img src="https://img.icons8.com/cotton/344/chrome.png"/></a><li><a href="#youtube"><img src="https://img.icons8.com/cotton/344/youtube.png"/></a><li><a href="#chrome"><img src="https://img.icons8.com/cotton/344/chrome.png"/></a>

以上最多涵盖 12 个图标，您可以轻松扩展到代码以涵盖更多.然后你要做的就是调整变量i和d

另一种配置:

.circle {宽度:300px；高度:300px；背景:rgba(0, 0, 0, 0.2);显示:inline-flex；边界半径:50%；}.菜单 {--d:120px;/* 到中心的距离 */--i:30d​​eg;/* 增量 */列表样式类型:无；填充:0；显示:网格；/* 使用网格 */保证金:自动；/* 将菜单与所有项目居中 */}.menu li {网格区域:1/1；/* 他们都在同一个位置(他们重叠) *//* 我们旋转然后平移到边缘，然后使用相反的旋转再次旋转 */变换:旋转(var(--r))translateX(var(--d))旋转(calc(-1*var(--r)))；}/* 调整每个图标的角度 */.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 {显示:块；}.menu li a img {宽度:50px；}

<ul class="menu" style="--i:50deg"><li><a href="#instagram"><img src="https://img.icons8.com/cotton/344/instagram-new.png"/></a><li><a href="#chrome"><img src="https://img.icons8.com/cotton/344/chrome.png"/></a><li><a href="#youtube"><img src="https://img.icons8.com/cotton/344/youtube.png"/></a>
<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><a href="#chrome"><img src="https://img.icons8.com/cotton/344/chrome.png"/></a><li><a href="#youtube"><img src="https://img.icons8.com/cotton/344/youtube.png"/></a><li><a href="#instagram"><img src="https://img.icons8.com/cotton/344/instagram-new.png"/></a><li><a href="#chrome"><img src="https://img.icons8.com/cotton/344/chrome.png"/></a><li><a href="#youtube"><img src="https://img.icons8.com/cotton/344/youtube.png"/></a>

<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><a href="#chrome"><img src="https://img.icons8.com/cotton/344/chrome.png"/></a><li><a href="#youtube"><img src="https://img.icons8.com/cotton/344/youtube.png"/></a><li><a href="#instagram"><img src="https://img.icons8.com/cotton/344/instagram-new.png"/></a><li><a href="#chrome"><img src="https://img.icons8.com/cotton/344/chrome.png"/></a><li><a href="#youtube"><img src="https://img.icons8.com/cotton/344/youtube.png"/></a><li><a href="#instagram"><img src="https://img.icons8.com/cotton/344/instagram-new.png"/></a><li><a href="#chrome"><img src="https://img.icons8.com/cotton/344/chrome.png"/></a><li><a href="#youtube"><img src="https://img.icons8.com/cotton/344/youtube.png"/></a><li><a href="#chrome"><img src="https://img.icons8.com/cotton/344/chrome.png"/></a><li><a href="#youtube"><img src="https://img.icons8.com/cotton/344/youtube.png"/></a><li><a href="#chrome"><img src="https://img.icons8.com/cotton/344/chrome.png"/></a>

通过调整 nth-child 逻辑，您可以控制元素的放置方式.

I want to place icons at the edge of their parent (the circle), like this:

I tried some ways, but in default absolute children placed at the start position of their parent, like this:

Even the parent has a circle shape (border-radius: 50%;)

I don't want to use margin or position for every single child, because their number is dynamic.

Is there any way to place children at the edge of their 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>

解决方案

Consider the use of transformation. You place all the item into the center then rototate/translate them to place them on the edges. I am using CSS variables to make the code eaiser but it's not mandatory

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

Another idea using 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>

If the number of element is limited you can optimize the first one like below:

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

The above cover up to 12 icons and you can easily extend to the code to cover more. Then all you have to do is to adjust the variable i and d

Another kind of configuration:

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

By adjusting the nth-child logic you control how your element will get placed.

这篇关于如何在圆的边缘放置图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆