3 个回答

实现方式有很多种,也很灵活,其实本质上是布局的事情。用 flex 实现下给你看看:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;

        }
        .row {
            display: flex; /* 使用 flex 布局 */
            display: -webkit-flex; /* 兼容 Webkit 内核的浏览器 */
            flex-direction: row; /* 主轴方向:水平 */
            justify-content: space-around;
        }
        .s1 {
            flex: 1;
        }
        .s2 {
            flex: 2;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="row">
            <span class="s1">系统名称:</span> <text class="s2">BOSS1</text>
            <span class="s1">Access-key:</span><text class="s2">admin</text>
            <span class="s1">空间大小:</span><text class="s2">200 TB</text>
            <span class="s1">创建人:</span><text class="s2">李青</text>
        </div>
        <div class="row">
            <span class="s1">系统ID:</span><text class="s2">1234567563</text>
            <span class="s1">Secret-key:</span><text class="s2">1234455</text>
            <span class="s1">已使用大小:</span><text class="s2">40 TB</text>
            <span class="s1">创建时间:</span><text class="s2">2017-04-12</text>
        </div>
    </div>

</body>
</html>

一般来说是用表格实现的,因为最方便。

这个完全是个人喜好,或者是团队约定.
我自己比较喜欢用下面的形式,因为熟悉与直观

<ul>
    <li>title:</li>
    <li>data</li>
<ul>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题