如何将此结构向右移动而不使用浮动？

Question

我有这样的HTML和CSS -

.font-size-add-class { 
 
\t background-color: #2f2f2f; 
 
\t 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-cell使用table那么div块具有不同的大小因不同字体 - 大小和额外的字体将不会水平对齐

我想使结构完全像它现在看的方式，只是它应该在右侧。我该怎么做？

Answer 1

而不是文本对齐补充一点：

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

.font-size-add-class { 
 
\t background-color: #2f2f2f; 
 
\t 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>