18910140161

HTML-将容器格式化为圆形会导致椭圆形-堆栈溢出

顺晟科技

2022-10-19 12:50:16

145

试图在圆形内设置图标的格式,结果会创建一个椭圆形。这似乎也是不同平台之间的行为变化,因为在Google Chrome上,它们是垂直的椭圆形(请参见这里-https://prnt.sc/1tb2phl)

在这里做了codepen示例-https://codepen.io/raicha/pen/dyrjwwa但以防万一,代码也在这里

还有,也许有更好的方法来组织这些东西?:)如果你让我知道的话,那就好了


顺晟科技:

不能将容器宽度指定为6%的高度和6%的宽度。它需要6%的总高度和6%的总宽度,这是绝对不同的值,对于一个圆,你需要指定准确的值。例如

  .container{
    position: absolute;
    width:6%;
    height:6%;
    top: 74.63%;
    border: 2px solid #E2E3E4;
    border-radius: 50%;
    box-sizing: border-box;
  }

  #facebookContainer{
    position: absolute;
    left: 35%;
    right: 87.24%;
  }


  #instagramContainer {
    position: absolute;
    left: 45%;
    right: 83.59%;
  }

  #twitterContainer {
    position: absolute;
    left: 55%;
    right: 80.16%;
  }

  #youtubeContainer {
    position: absolute;
    left: 65%;
    right: 76.72%;
  }

  #youtube{
    position: absolute;
    left: 65%;
    right: 76.72%;

  }

下面的代码现在我在容器上指定了相同的宽度和高度。

  .container{
    position: absolute;
    width:6%;
    height:6%;
    top: 74.63%;
    border: 2px solid #E2E3E4;
    border-radius: 50%;
    box-sizing: border-box;
  }

  #facebookContainer{
    position: absolute;
    left: 35%;
    right: 87.24%;
  }


  #instagramContainer {
    position: absolute;
    left: 45%;
    right: 83.59%;
  }

  #twitterContainer {
    position: absolute;
    left: 55%;
    right: 80.16%;
  }

  #youtubeContainer {
    position: absolute;
    left: 65%;
    right: 76.72%;
  }

  #youtube{
    position: absolute;
    left: 65%;
    right: 76.72%;

  }
  • TAG:
相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航