对齐标签，跨度和按钮

Question

我有下面定义的元素：

标签（名称）范围（姓氏）范围（按钮）

给出了如下所示的结果：

姓名：James Change 姓氏：债券变动 年龄：56岁变化

现在我想像这样对齐我的元素：

姓名：James Change 姓氏：债券变动 年龄：56岁变化

我知道，一种方法是使用表格。我不想用桌子。我设法将按钮按钮与右边的按钮对齐：右边但是我没有设法将姓氏与名字分开。我尝试在两者上留下填充/边距，然后他们离开了，但随后他们移动得不均匀。此外，这种方式调整窗口大小会导致文本相互溢出。任何想法如何解决这个问题？

Answer 1

简单：

HTML

 <div class="row">
   <label>Name</label> 
   <span>John Doe</span>
   <span>Change</span>
 </div>

CSS：

.row label, .row span {
  display: inline-block;
  vertical-align: top;
}

看到它正常工作：

.row label,
.row span {
  display: inline-block;
  vertical-align: top;
  border: 1px solid black;
  padding: 10px;
  margin: 0 2px;
}

<div class="row">
  <label>Name</label>
  <span>John Doe</span>
  <span>Change</span>
</div>