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

Question

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

因为我找不到我喜欢的 SVG，而且我不能使用 PNG（请使用矢量），所以我想在 HTML 中制作自己的 SVG。

我试过了：

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>

但这绝对不是我想要的。我想要突出显示的内容：

关于如何实现此目标的任何想法？

Answer 1

根据评论，您可以使用建议网站中的图标。但如果您仍然想使用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>

Answer 2

您为一个简单的图标使用了很多代码。它可以用一个元素和几行 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),
    linear-gradient(currentColor 0 0) var(--p,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>

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

CSS for a left-aligned text icon not working

html

css

icons

rich-text-editor