1

Internet Explorer 7(インターネットエクスプローラ5.5および6)でもこの定義リストの整列に問題がありますが、ie7で動作させることができればうれしいでしょう。IE7の定義リスト - アラインメントの問題

スクリーンショット:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <style type="text/css"> 
     .details dt { 
      clear: left; 
      float: left; 
      width:100px; 
      margin: 0; 
      font-family:verdana; 
      font-size:10px; 
      font-weight: bold; 
     } 
     .details dd { 
      float: left; 
      margin: 0; 
      font-family:verdana; 
      font-size:10px; 
     } 
    </style> 
</head> 
<body> 
    <dl class="details"> 
     <dt>Country:</dt> 
     <dd>Canada</dd> 

     <dt>State:</dt> 
     <dd>Alberta</dd> 
     <dt>City:</dt> 
     <dd>Calgary</dd> 
     <dt>District:</dt> 
     <dd>Downtown</dd> 

     <dt>Street:</dt> 
     <dd>Main St</dd> 
    </dl> 
</body> 
</html> 
+0

'table'が有利になるだろう。 '

​​カナダなどを使用してください。 – tomasz86

答えて

2

明確削除:左とDLに幅を追加します。作業例:

http://jsfiddle.net/sFxcE/1/

コード:あなたは牛車に頼ることなく、IE6/7の互換性が必要な場合は

<head> 
      <style type="text/css"> 
      .details dt { 

      float: left; 
      width:100px; 
      margin: 0; 
      font-family:verdana; 
      font-size:10px; 
      font-weight: bold; 
      } 

      .details dd { 
      float: left; 
      margin: 0; 
      font-family:verdana; 
      font-size:10px; 
      } 
      .details 
      { 
      width:200px; 
      } 


      </style> 


      </head> 

      <body> 

      <dl class="details"> 
      <dt>Country:</dt> 
      <dd>Canada</dd> 

      <dt>State:</dt> 
      <dd>Alberta</dd> 
      <dt>City:</dt> 
      <dd>Calgary</dd> 
      <dt>District:</dt> 
      <dd>Downtown</dd> 

      <dt>Street:</dt> 
      <dd>Main St</dd> 
      </dl> 


      </body> 
      </html> 
+0

あなたの助けをもう一度いただきありがとうございます。 – BobJIII

関連する問題

国: