0

在我的网络应用程序中，我有许多用户创建的事件实例。如果用户请求查看特定事件的详细信息，则显示为

Created By      : damon
Name            : myhomework
Creation date   : 24 October, 2012
Duraion         : 2 hours ,40 minutes
Status          : PENDING
Perc.completion : 40% (piechart image)

那么，这是创建此布局的正确方法。是<table>这样做的方法吗？或者我应该使用 css 吗？我试图用 css 做到这一点，但似乎在使用 float 时我把它搞砸了。

欢迎任何建议

4

2 回答 2

1

我建议使用定义列表<dl>标签，因为它可以完美地用于键值对。为了让你的布局直接，你可以使用这个：

CSS

dl {
    width:          400px;
}

dt {
    display:        inline-block;
    width:          100px;
    margin:         0;
    padding:        0;
}


dd {
    display:        inline-block;
    width:          290px;
    margin:         0;
    padding:        0;
}

dd:before {
    content:        ':';
    padding:        0 10px 0 0;
}

HTML

<dl>
    <dt>Item 1</dt>
    <dd>Text 1</dd>

    <dt>Item 2</dt>
    <dd>Text 2</dd>

    <dt>Item 3</dt>
    <dd>Text 3</dd>
</dl>

演示

先试后买

于 2012-10-23T16:45:31.723 回答
0

我会在这里使用DL（定义列表）。像这样的东西：

HTML

<dl>
    <dt>Created By:</dt>
    <dd>damon</dd>

    <dt>Name:</dt>
    <dd>myhomework</dd>

    <dt>Creation date:</dt>
    <dd>24 October, 2012</dd>

    <dt>Duraion:</dt>
    <dd>2 hours ,40 minutes</dd>

    <dt>Status:</dt>
    <dd>PENDING</dd>

    <dt>Perc.completion:</dt>
    <dd>40% (piechart image)</dd>
</dl>

CSS

dt { clear:left; float:left; width:8em; }
dd { float:left; }

尽管您当然可以证明表格也是合适的。

于 2012-10-23T16:45:43.927 回答