Repository navigation
第 100 期(W3C 标准-CSS-布局排版)：两端对齐 #103
Description
已知如下 HTML 结构：
<dl>
<dt>手机系统</dt>
<dd>Android</dd>
<dt>登录方式</dt>
<dd>QQ互联登录</dd>
<dt>绑定事件</dt>
<dd>2019-01-02 00:01</dd>
<dt>绑定状态</dt>
<dd>成功</dd>
<dt>备注</dt>
<dd>如果需要修改绑定，请联系HR进行修改</dd>
</dl>如何实现下图所示的两端布局效果？
最佳实践1：DEMO
代码量少，容错性最强，语义最佳，维护成本极低
dl {
display: grid;
grid-template-columns: auto 1fr;
grid-column-gap: 1em;
}
dd {text-align: right;}最佳实践2：DEMO
代码量非常少，兼容性非常好
dd {
/* 5em = 左侧汉字最大长度 + 1em（间距） */
margin: -1.5em 0 0 5em;
text-align: right;
}
Activity