如何将此结构向右移动而不使用浮动?
问题描述:
我有这样的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
块具有不同的大小因不同字体 - 大小和额外的字体将不会水平对齐
我想使结构完全像它现在看的方式,只是它应该在右侧。我该怎么做?
答
而不是文本对齐补充一点:
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>
+0
我喜欢你的解决方案,先生:) – Morpheus
+0
这是黄金!从未使用保证金属性的方式+1 –
'.font-大小{浮法:右}'? – Morpheus
你没有正确地阅读这个问题,是吗? –
我做到了。使用控制台进行测试,它工作。 – Morpheus