Question

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

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时，我似乎把它搞砸了。

欢迎任何建议

Answer 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>

<强>演示

Try before buy

Answer 2

我会在这里使用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; }

虽然你当然可以证明表格也是合适的。

我应该用它来显示事件-css或表的详细信息

2 个答案: