如何在不使用float的情况下将此结构移动到右侧？

Question

我有这个HTML和CSS -

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如果我没有在父级上使用table而在孩子上使用table-cell，那么由于字体大小不同，div区块会有不同的大小不会水平对齐

我想让结构与现在看起来完全一样，只是它应该在右侧。我该怎么办？

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>