css向左移动一个字符串两个空格

Question

我有两个李的ul.

<ul>
  <li class="first">$2.00</li>
  <li class="second">- $4.00</li>
</ul>

现在,当打印他们没有正确对齐.我想要做的是将第二个类别移动到左边两个空格,这样两个美元符号符号垂直对齐这是我的codepen.

codepen

Answer 1

我会在这样的类中指定符号:

.negative::before {
  position: absolute;   
  content:"-";
  left: 40px;
}

<ul>
  <li class="first positive">$2.00</li>
  <li class="second negative">$4.00</li>
</ul>

这将是特别方便的,因为预计大多数会计应用程序将显示不同的负数(取决于国家的用途).

如有必要,可以使用JavaScript自动设置"否定"类:

[].forEach.call(document.querySelectorAll("li"), function(e){
  if (/^-\$\d+(\.\d+)?$/.test(e.textContent)){
       e.className = "negative";
       e.textContent = e.textContent.replace(/-/,'');
  }
});

.negative::before {
  position: absolute;   
  content:"-";
  left: 40px;
  color: red;
}

<ul>
  <li>$2.00</li>
  <li>-$4.00</li>
</ul>