开发者社区> 问答> 正文

怎么让每一列的第二个元素都对齐?

如图2(第2个图)所示,用列表形式来表示每一列的资产有效期,数字为资产数量,红框为有效期。

当资产数量宽度固定,有效期就可以左对齐了。
screenshot
附上关键代码:

<ul class="valid-time">
    <li><em class="number">200</em>2016.03.31 18:00:00 —2016.03.31 18:00:01</li>
    <li><em class="number">80000</em>永久</li>
    <li><em class="number">8</em>未设置</li>
</ul>

.valid-time .number{margin-right:15px; font-style:normal; display:inline-block;}

展开
收起
杨冬芳 2016-06-12 14:02:20 2017 0
1 条回答
写回答
取消 提交回答
  • IT从业

    可以用flex

    <style>
    li{
        display:-webkit-flex;
        display: flex;
      }
      span:first-child{
        width:100px;
        margin-right: 20px;
      }
      span:last-child{
        flex:1;
      }
    </style>
    <ul>
        <li><span>100</span><span>42938748978942</span></li>
        <li><span>1020</span><span>42938748978942</span></li>
        <li><span>10032</span><span>42938748978942</span></li>
        <li><span>20</span><span>42938748978942</span></li>
      </ul>
    2019-07-17 19:33:56
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载