如何将两个div对齐，同时保持它们与左对齐

Question

我需要保持div的相同对齐，但它们都对齐右边： 我在这里有一张图片： 你可以看到'hello'和'helloooooo'都向右对齐但是我希望它们对齐到左边。

所以它看起来像这样：

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>