5

絶対配置やテーブルを使用せずに、CSS を使用してラベル/値のペアを中央に揃えたいと思います (スクリーン ショットを参照)。そのスクリーン ショットでは、絶対値 (つまり、$4,500/週) を配置し、それに対してラベルを浮かせました。しかし、absolute は IE ではうまく機能せず、良いテクニックではないと聞いています。

しかし、ラベルがすべて絶対値なしで正当化されている場合、どうすればこの効果を達成できますか?

代替テキスト http://www.amherstparents.org/files/shot.jpg

4

9 に答える 9

13

表形式のデータを表示している場合、表を使用することは恥ずべきことではありません。

于 2008-10-23T19:08:58.330 に答える
9

私は混乱しています、そのデータの表形式は何ですか? 記録はどこにありますか？異なるフィールドの行は、従来の意味でのテーブルを実際には作成しません。（そのことについては、行ごとに2つのレコードを持つようにハッキングすることもありません）

このアイデアを楽しませるなら、テーブルの左半分と右半分の違いは何ですか? ある場合、列見出しは何になりますか?

私は定義リストの提案を好みます。表よりも間違いなく適しています。また、すべての DT と DD が float:left と width:25% で、次の順序である場合、2 つの列は必要ありません: コスト、ペット、睡眠、喫煙など... したがって、1 つの定義リストを使用できます。それは本当にそうあるべきです。

ただし、これらの要素のいずれかのコンテンツが 2 行にまたがる場合に備えて、他のすべての DT に clear:left が必要になるでしょう。

<style>
    dl
    {
        float:left;
        width:100%;
    }
    dt,
    dd
    {
        float:left;
        width:24%;
        margin:0;
        padding:0;
    }
    dt
    {
        text-align:right;
        padding-right:.33em;
    }
    dd
    {
        text-align:left;
    }
</style>
<dl>
    <dt>Cost:</dt>
    <dd>$4,500/wk</dd>
    <dt>Pets:</dt>
    <dd>No</dd>
    <dt>Sleeps:</dt>
    <dd>1</dd>
    <dt>Smoking:</dt>
    <dd>No</dd>
</dl>
于 2008-10-23T20:16:21.393 に答える
3

CSS のtext-alignプロパティで固定幅の div を使用します。div を左にフロートすることを忘れないでください。

于 2008-10-23T19:09:31.387 に答える
3

DL、DT、および DD を使用しているとします。

<dl>
<dt>Cost:</dt>
<dd>$4,500/wk</dd>
<dt>Sleeps:</dt>
<dd>1</dd>
</dl>

次のおおよその CSS を使用できます (テストされていません)。

dl { width: 200px; }
dt { width: 100px; text-align: right; float: left; clear: both; }
dd { width: 100px; margin: 0; float: left; }

編集: Chris Marasti-Georg が指摘したように:

さらに、2列が必要な場合は、2つの定義リストを使用して、それらをフロートします

于 2008-10-23T19:15:04.667 に答える
2

@jonは正しいです。表形式のデータの場合は、テーブルを使用できます。ただし、本当にテーブルを使用したくない場合は、これが必要だと思います。

CSS

.label {
  min-width: 20%;
  text-align: right;
  float: left;
}

HTML

<div class="pair">
  <div class="label">Cost</div>
  <div class="value">$4,500/wk</div>
</div>
<div class="pair">
  <div class="label">Sleeps</div>
  <div class="value">1</div>
</div>
<div class="pair">
  <div class="label">Bedrooms</div>
  <div class="value">9</div>
</div>

EDIT @Chris Marasti-Georg は、ここでは定義リストの方が適切であると指摘しています。同意しますが、ブロックレベルの要素でも同じことが簡単にできること、そしてこの目標を達成するために必要な定義リストのデフォルトのスタイリングには何もないことを示したかったのだと思います。

于 2008-10-23T19:20:11.397 に答える
2

Rahul の投稿の拡張:

CSS

#list { width: 450px; }
#left { float: left; background: lightgreen; }
#right { float: right; background: lightblue; }
dl { width: 225px; }
dt { width: 100px; text-align: right; float: left; clear: both; }
dd { width: 100px; margin: 0; float: left; padding-left: 5px; }

HTML

<div id="list">
    <dl id="left">
        <dt>Cost:</dt>
        <dd>$4,500/wk</dd>
        <dt>Sleeps:</dt>
        <dd>1</dd>
        <dt>Bedrooms:</dt>
        <dd>9</dd>
        <dt>Baths:</dt>
        <dd>6</dd>
    </dl>
    <dl id="right">
        <dt>Pets:</dt>
        <dd>No</dd>
        <dt>Smoking:</dt>
        <dd>No</dd>
        <dt>Pool:</dt>
        <dd>No</dd>
        <dt>Waterfront:</dt>
        <dd>No</dd>
    </dl>
</div>

これを FF 3.0.1、IE6、および IE7 でテストしました。背景色は、列の開始位置と終了位置を視覚化するのに役立ちます。

于 2008-10-23T19:42:39.150 に答える
0

私は常に定義リストを、キーと値のペアではなく、項目の定義に使用するものとして扱ってきました。(9 は「ベッドルーム」の定義ではありません)。ただし、この特定の構造 (キーと値のペアのリスト) は、それを適切に反映するネイティブのセマンティック マークアップがないため、何年も議論の原因となっています。

定義が何であるかについて肛門ではない場合は、DL を探してください。または、テーブルに行きます。ヘッダー/セル スコープが正しく設定されている場合、行にキー/値のペアを含むテーブルは完全に有効です。私は最近これを行っていますが、意味的に最も正確な表現のようです。

于 2008-10-24T07:52:01.767 に答える
0

テーブルを使用してテーブルをレイアウトし、CSS を使用してそのテーブルをページ上の好きな場所に配置するのはどうですか?

于 2008-10-23T19:30:26.837 に答える
0

テーブルを使用してこれを実装する際の簡単なメモとして、これを十分に利用できるようにするいくつかの構造があります。最も単純なのは、ラベルに TH を使用し、値に TD を使用することです。 このサイトには素晴らしい議論があり、セルのヘッダーなどについて深く掘り下げています。

于 2008-10-23T19:44:17.477 に答える