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

【问题标题】：How to align two divs to the right while keeping them align to the left如何将两个 div 向右对齐，同时保持它们向左对齐
【发布时间】：2017-07-11 11:31:20
【问题描述】：

我需要保持 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;
  }
}

【问题讨论】：

标签： html css sass material-design

【解决方案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>

【讨论】：