html - 如何将两个 div 向右对齐，同时保持它们向左对齐

Question

我需要使 div 保持相同的对齐方式，但它们都向右对齐:我这里有一张图片:如您所见，'hello' 和 'hellooooooo' 都向右对齐，但我希望它们向左对齐。

所以它看起来像这样:

HTML

<ul class="fu-form--job-edit-details mdl-list">
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content">
      <span class="fu-form--job-edit-details--title">Hello:</span>
      World
    </span>
  </li>
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content">
      <span class="fu-form--job-edit-details--title">Hello:</span>
      World
    </span>
  </li>
</ul>

CSS:

.fu-form--job-edit-details {
  .mdl-list__item {
    color: $text-label-color;
    padding: 0;
    min-height: 35px;
  }

  .mdl-list__item-primary-content {
    justify-content: flex-end;
  }

  .fu-form--job-edit-details--title {
    font-weight: bold;
    padding-right: 5px;
  }
}

Answer 1

是你想要的吗？

.fu-form--job-edit-details{
  float:right;
  text-align: right;
}


.mdl-list__item {
    color: #222;
    padding: 0;
    min-height: 35px;
    list-style:none;
  }

  .mdl-list__item-primary-content {
    /*justify-content: flex-end;*/
    width: 100%;
  }

  .fu-form--job-edit-details--title {
    font-weight: bold;
    padding-right: 5px;
    float:left;
  }

<ul class="fu-form--job-edit-details mdl-list">
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content">
      <span class="fu-form--job-edit-details--title">Hello:</span>
      World
    </span>
  </li>
  <li class="mdl-list__item">
    <span class="mdl-list__item-primary-content">
      <span class="fu-form--job-edit-details--title">Hellooooooooooooooo:</span>
      World
    </span>
  </li>
</ul>