1

リストがあり、各アイテムに2つのセクションが必要です。また、最初のセクションは固定幅である必要があります。どのようにコーディングすればよいですか？

私は定義リストを使ってみました：

    <dl>
      <dt style="width: 2em;">foo</dt><dd>bar</dd>
    ...

    </dl>

...およびスパン付きのユーザーリスト：

    <ul>
      <li><span style="width: 2em;">foo<span>bar</li>
    ...

    </ul>

どちらも機能しませんでした。それを行うための標準的な方法はありますか？

4

6 に答える 6

2

アランが言ったように、しかし、単に div を配置すると、思い通りに動作しない場合は、これを試してください:

<ul>
  <li><div style="width: 200px; display: inline-block;">foo</div>bar</li>
  <li><div style="width: 200px; display: inline-block;">foo12</div>bar</li>
  <li><div style="width: 200px; display: inline-block;">foo12345</div>bar</li>
  <li><div style="width: 200px; display: inline-block;">foo12345678</div>bar</li>
</ul>

(リスト項目ごとにスタイル属性を繰り返す代わりに、クラスを使用したい場合があります)

于 2009-05-24T07:16:20.940 に答える
1

<span>タグはインラインであるため、幅は適用されません。<div>タグをまたは<p>またはその他のブロック要素に置き換えてみてください。

于 2009-05-24T07:04:45.270 に答える
1

dl を使用し、dt を左にフロートします。

<style type="text/css">
dt {clear:left; float:left; width: 8em;}
</style>

<dl>
     <dt>foo<dt>
     <dd>bar</dd>
     <dt>foo1<dt>
     <dd>bar1</dd>
     <dt>foo12345<dt>
     <dd>bar</dd>
 </dl>
于 2009-05-24T10:53:10.927 に答える
1

私が思いついた方法は、おそらく標準的ではありません（ただし、それを実装する「標準的な」手段があると確信していないためです）が、機能します：

    <style type="text/css" media="screen">

        #container
            {width: 50%;
            margin: 0 auto;
            }

        ol,
        ul  {border: 1px solid #ccc;
            width: 90%;
            padding: 1.4em 0;
            }

        ol li,
        ul li   {background-color: #ccc;
            margin-left: 20%;
            }

        ol li span.list-head,
        ul li span.list-head
            {background-color: #ffa;
            float: left;
            display: block;
            width: 6em;
            }

        dl  {border: 1px solid #ccc;
            line-height: 1.4em;
            padding: 1.4em 0 0 0;
            }

        dl dt   {background-color: #ffa;
            display: block;
            margin: 0;
            width: 10%;
            }

        dl dd   {background-color: #fc0;
            display: block;
            margin: 0;
            width: 88%;
            margin-left: 11%;
            position: relative;
            top: -1.4em;
            }       

    </style>
...
    <div id="container">

        <ol>

            <li><span class="list-head">Foo:</span> bar.</li>

            <li><span class="list-head">Bar:</span> baz.</li>

            <li><span class="list-head">Baz:</span> foo.</li>

        </ol>

        <ul>

            <li><span class="list-head">Foo:</span> bar.</li>

            <li><span class="list-head">Bar:</span> baz.</li>

            <li><span class="list-head">Baz:</span> foo.</li>

        </ul>

        <dl>

            <dt>Foo:</dt>
            <dd>bar.</dd>

            <dt>Bar:</dt>
            <dd>baz.</dd>

            <dt>Baz:</dt>
            <dd>foo.</dd>

        </dl>

    </div>

動作中のデモがあります:http://www.davidrhysthomas.co.uk/so/lists.html .

于 2009-05-24T11:38:14.483 に答える
0

最初の部分のラベルまたはインライン div のいずれかを試してください

于 2009-05-24T07:16:50.283 に答える
0

質問したいのですが、これは表形式のデータを表すためのものですか? 私たちは、HTML テーブルは悪であると考えるように教え込まれてきましたが、データのテーブルを表示するには完璧です。複数のコーダーがs と CSS<table>を使用してタグの機能を複製しようとしているのを見てきました。<div>

もちろん、そうでない場合は、続けてください。:-)

于 2009-05-24T12:03:02.593 に答える