Materialise CSS - 让徽章左对齐？

Question

这里有一个代码笔示例：https://codepen.io/dsudomoin/pen/xxVorwW

试图让红色“应该始终保持左对齐”左对齐（蓝色右对齐反之亦然），但我似乎无法弄清楚。

我尝试过的事情：将 left-align 和 left 放在跨度的 class 和 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

为了您的目的，您可以添加两个具有以下 css 的自定义 classes。

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

请注意，徽章将紧挨着可折叠的文本（它们之间没有边距）。当你想要它们之间有一些space时，有两种可能：

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

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

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

2:编辑上述classcustom-align-left中的margin-left属性

Answer 2

这是因为您的 .badge class 默认有左边距。这将使您的 .red 向左对齐。

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

Materialise CSS - 让徽章左对齐？

Materialize CSS - getting a badge to left align?

css

materialize