IE7定義列表 - 對齊問題

我在使用Internet Explorer 7中這個定義列表中的對齊問題IE7定義列表 - 對齊問題

（也Internet Explorer 5.5或6，但我會很高興，如果我能得到它在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>

來源

2011-11-10 BobJIII

一個'如果你需要IE6/7的兼容性，而不依賴於兩輪牛車table'會做的更好。只需使用'

加拿大'等等。 – tomasz86

回答

刪除明確：左，並添加寬度DL。工作示例：

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

代碼：

<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>

來源

2011-11-10 23:55:31 user194076

它現在工作，再次感謝您的幫助。 – BobJIII

相關問題

國家：