左对齐文本图标的 CSS 不起作用

如何解决左对齐文本图标的 CSS 不起作用

我正在尝试制作一个简单的网站编辑器，并且想要制作一个左对齐图标，例如：

由于我找不到我喜欢的 SVG，而且我不能使用 PNG（请使用矢量），我想用 HTML 制作我自己的。

我试过了：

div#format-controls div#text-align-controls div.text-align-control
{
  width: 24px;
  height: 24px;

  bottom: 0px;

  max-width: 10%;
  max-height: 100%;

  display: inline-block;
}
div#format-controls div#text-align-controls div.text-align-control span
{
  width: 100%;
  height: calc(100% / 8);

  padding: 0px;

  display: inline-block;

  color: black;
  background: black;
}

<div id="format-controls">
  <div id="text-align-controls">
    <div id="left-text-align" class="text-align-control">
      <span class="left-text-align-1"></span>
      <span class="left-text-align-2"></span>
      <span class="left-text-align-1"></span>
      <span class="left-text-align-2"></span>
    </div>
  </div>
</div>

但这绝对不是我想要的。我想要像突出显示的东西：

关于我如何实现这一目标的任何想法？

解决方法

根据评论，您可以使用来自建议站点的图标。 但是如果你仍然想使用CSS来创建左对齐图标，请修改CSS如下。

div#format-controls div#text-align-controls div.text-align-control
{
  width: 24px;
  height: 24px;

  bottom: 0px;

  max-width: 10%;
  max-height: 100%;

  display: inline-block;
}
div#format-controls div#text-align-controls div.text-align-control span
{
  width: 100%;
  height: calc(100% / 8);

  padding: 0px;

  display: block;
  margin-bottom: 3px;

  color: black;
  background: black;
}
div#format-controls div#text-align-controls div.text-align-control span:last-of-type{
  margin:0;
}
div#format-controls div#text-align-controls div.text-align-control span:nth-child(2n){
   width: 80%;
}
div#format-controls div#text-align-controls div.text-align-control.selected{
  background: #E8F0FE;
  padding: 10px;
  border-radius: 3px;
}
div#format-controls div#text-align-controls div.text-align-control.selected span{
  background: #1A73E8;
}

<div id="format-controls">
  <div id="text-align-controls">
    <div id="left-text-align" class="text-align-control">
      <span class="left-text-align-1"></span>
      <span class="left-text-align-2"></span>
      <span class="left-text-align-1"></span>
      <span class="left-text-align-2"></span>
    </div>
  </div>
</div>
<p>For selected state check below icon's html and extra css</p>
<div id="format-controls">
  <div id="text-align-controls">
    <div id="left-text-align" class="text-align-control selected">
      <span class="left-text-align-1"></span>
      <span class="left-text-align-2"></span>
      <span class="left-text-align-1"></span>
      <span class="left-text-align-2"></span>
    </div>
  </div>
</div>

,

您为一个简单的图标使用了大量代码。它可以用一个元素和几行 CSS 来完成

.icon {
  width:24px;
  height:24px;
  display:inline-block;
  border:10px solid transparent;
  background:
    linear-gradient(currentColor 0 0) 0 0,linear-gradient(currentColor 0 0) var(--p,0) calc(100%/3),linear-gradient(currentColor 0 0) 0 calc(2*100%/3),0) 100%;
  background-size:100% 3px,75% 3px;
  background-repeat:no-repeat;
}

.right { --p:100%;}
.center { --p:50%;}
.full {background-size:100% 3px;}
.active {color:#1A73E8;background-color:#E8F0FE}

<div class="icon"></div>
<div class="icon active"></div>
<div class="icon right"></div>
<div class="icon right active"></div>
<div class="icon center"></div>
<div class="icon center active"></div>
<div class="icon full"></div>
<div class="icon full active"></div>