HTML/CSSでリストを整理する

Question

私にはリストがあり、各項目に2つのセクションが必要です。私はまた、固定幅の最初のセクションが必要です。どのようにコード化すればよいですか？

私は定義リストを使用して試してみた：

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

    </ul> 

どちらも働いた：スパンで

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

    </dl> 

...とユーザーリスト。それを行う標準的な方法はありますか？

Answer 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です。

Answer 2

幅が<span>のタグには適用されません。タグを<div>または<p>または他のブロック要素で置き換えてください。アランのよう

Answer 3

は言ったが、あなたはそれはあなたが望むように動作しませんの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> 

を（多分あなたはスタイル属性を繰り返すのではなく、クラスを使用したいのですが各リスト項目）

Answer 4

は、DLを使用して第一の部分のラベルまたはインラインのdiv

Answer 5

のいずれかを試してみて、左に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> 

Answer 6

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

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