html - 对齐标签、跨度和按钮

Question

我有如下定义的下一个元素:

标签(名字)跨度(姓氏)跨度(按钮)

结果如下:

姓名:詹姆斯变化姓氏:债券变化年龄:56 变化

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

姓名:詹姆斯变化姓氏:债券变化年龄:56 变化

我知道，一种方法是使用表格。我不想用 table 。我已经设法将按钮按钮与 float:right 对齐，但我还没有设法将姓氏与姓名分开。我尝试在两者上留下填充/边距，然后它们移开了，但随后它们移动不均。此外，这种调整窗口大小的方式会导致文本相互溢出。有什么解决办法吗？

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>