如何使第一个元素与右侧对齐，而其他元素在左侧对齐？答案

【问题标题】：How to make the first element aligned to the right and the other elements in the left of that first?如何使第一个元素与右侧对齐，而其他元素在左侧对齐？
【发布时间】：2020-01-02 01:15:13
【问题描述】：

我有两个 HTML 元素：div 中的 label 和 span 我希望标签向右对齐，跨度在标签左侧；

像这样：

但这就是我所拥有的：

这是 HTML 和 CSS 代码：

.barcode-pdf-body div {
  text-align: right;
  border-color: transparent;
  margin-top: 0;
  font-size: 10px;
  margin-bottom: 9px;
}

.barcode-pdf-body div label {
  margin-left: 5px;
  font-weight: bold;
  font-family: "myFont";
}
.barcode-pdf-body div span {
  font-family: "myFont";
}

    <div>
        <label>
            {% trans 'constraint_number' %}:
    
        </label>

        <span>
            {{ correspondence.number }}
        </span>

    </div>

【问题讨论】：

标签： html css

【解决方案1】：

如果您只能更改 CSS 文件，请检查以下代码：

.barcode-pdf-body div {
  text-align: right;
  border-color: transparent;
  margin-top: 0;
  font-size: 10px;
  margin-bottom: 9px;

  display: flex;
}

.barcode-pdf-body div label {
  margin-left: 5px;
  font-weight: bold;
  font-family: "myFont";

  order: 2;
}

.barcode-pdf-body div span {
  font-family: "myFont";

  order: 1;
}

    <div>
        <label>
            {% trans 'constraint_number' %}:
    
        </label>

        <span>
            {{ correspondence.number }}
        </span>

</div>

【讨论】：

【解决方案2】：

请这样尝试：

div label {
float:right;
} 
div span {
float:left;
}

【讨论】：