Question

我正在使用语义UI图标，并试图组成多个图标来创建一个新图标。使用大图标时，它非常不错，但是当使用小图标时，它似乎并没有居中定位。

下面，我们看到图标越小，水平对齐方式越不正确

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/components/icon.css">
  </head>
  <body>
		
    <i class="huge icons">
      <i class="circle outline icon"></i>
      <i class="tiny times  icon"></i>
    </i>

    <i class="big icons">
      <i class="circle outline icon"></i>
      <i class="tiny times  icon"></i>
    </i>

    <i class="large icons">
      <i class="circle outline icon"></i>
      <i class="tiny times  icon"></i>
    </i>

    <i class="icons">
      <i class="circle outline icon"></i>
      <i class="tiny times  icon"></i>
    </i>
  </body>
</html>

Answer 1

默认情况下，定义此问题会产生少量利润，只需将其删除即可：

i.icons .icon:first-child {
  margin-right:0;
}

完整代码：

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/components/icon.css">
<style>
i.icons .icon:first-child {
  margin-right:0;
}
</style>
</head>
  <body>
		
    <i class="huge icons">
      <i class="circle outline icon"></i>
      <i class="tiny times  icon"></i>
    </i>

    <i class="big icons">
      <i class="circle outline icon"></i>
      <i class="tiny times  icon"></i>
    </i>

    <i class="large icons">
      <i class="circle outline icon"></i>
      <i class="tiny times  icon"></i>
    </i>

    <i class="icons">
      <i class="circle outline icon"></i>
      <i class="tiny times  icon"></i>
    </i>
  </body>
</html>

图标未完全居中

1 个答案: