0

私のWebアプリには、ユーザーが作成したイベントのインスタンスが多数あります。ユーザーが特定のイベントの詳細を表示するように要求すると、次のように表示されます。

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 に答える