实现CSS-使徽章左对齐？

Question

这是一个密码笔示例：https://codepen.io/dsudomoin/pen/xxVorwW

试图使红色的“应该总是留在左边”对齐（反之亦然，对于蓝色的右对齐），但是我似乎无法弄清楚。

我尝试过的事情：将left-align和left放在span和div的类中。

<ul id="provider-results" class="collapsible popout">
  <li>
    <div class="collapsible-header">Clare 
      <span data-badge-caption="should always be left" class="new badge red">1</span></div>
    <div class="collapsible-body"></div>
  </li>
  <li>
    <div class="collapsible-header">Denise 
      <span data-badge-caption="should always be left" class="new badge red">1</span>
      <span class="new badge blue" data-badge-caption="should always be right">1</span>
    </div>
    <div class="collapsible-body">
      <div><b>will_see_hard_of_hearing</b>: If it is easy to get a translator</div>
      <div><b>some other criteria</b>: and then the note is here</div>
    </div>
  </li>
</ul>

Answer 1

这是因为默认情况下，您的.badge类的左边距为。这会将.red对准左侧。

.collapsible span.badge.red {
   margin: 0 auto 0 0;
}

Answer 2

出于您的目的，您可以使用以下CSS添加两个自定义类。

.custom-align-left{
    margin-left: 0;
    margin-right: auto;
}
.custom-align-right{
    margin-right: 0;
    margin-left: auto;
}

请注意，徽章将位于可折叠文本的旁边（它们之间没有空白）。当您希望它们之间有一些空间时，有两种可能性：

1：：将您的文本包装到span中，并向其中添加padding-right或margin-right。例如：

<span class="some-margin-right">Clare</span>

.some-margin-right{
  margin-right: 16px;
}

2 ：编辑上述类margin-left中的custom-align-left属性。