css - 如何在不使用 float 的情况下将此结构向右移动？

Question

我有这个 HTML 和 CSS -

.font-size-add-class {
	background-color: #2f2f2f;
	color: #f9f7f1;
}

.font-sizes {
  text-align: right;
  display: table;
  margin-top: 15px;
  cursor: pointer;
}
.font-sizes > .small {
  font-size: 12px;
}
.font-sizes > .medium {
  font-size: 14px;
}
.font-sizes > .large {
  font-size: 18px;
}
.font-sizes > div {
  display: table-cell;
  padding: 0 10px;
  font-weight: bold;
  border-top: 1px solid #2f2f2f;
  border-bottom: 1px solid #2f2f2f;
  border-right: 1px solid #2f2f2f;
}
.font-sizes > div:first-child {
  border-left: 1px solid #2f2f2f;
}

<div class="font-sizes">
    <div class="small">a</div><!--
 --><div class="medium font-size-add-class">a</div><!--
 --><div class="large">a</div>
</div>

如果我不在父级上使用 table 而在子级上不使用 table-cell 那么 div block 将具有不同的大小，因为改变字体大小，另外字体不会水平对齐

我想让这个结构完全像现在的样子，只是它应该在右边。我该怎么做？

Answer 1

而不是 text-align 添加这个:

margin-left: auto;
margin-right: 0;

.font-size-add-class {
	background-color: #2f2f2f;
	color: #f9f7f1;
}

.font-sizes {
  /*text-align: right;*/
  display: table;
  margin-top: 15px;
  cursor: pointer;
  margin-left: auto; /* align table to the right */
  margin-right: 0;
}
.font-sizes > .small {
  font-size: 12px;
}
.font-sizes > .medium {
  font-size: 14px;
}
.font-sizes > .large {
  font-size: 18px;
}
.font-sizes > div {
  display: table-cell;
  padding: 0 10px;
  font-weight: bold;
  border-top: 1px solid #2f2f2f;
  border-bottom: 1px solid #2f2f2f;
  border-right: 1px solid #2f2f2f;
}
.font-sizes > div:first-child {
  border-left: 1px solid #2f2f2f;
}

<div class="font-sizes">
    <div class="small">a</div><!--
 --><div class="medium font-size-add-class">a</div><!--
 --><div class="large">a</div>
</div>