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

IE7定义列表 - 对齐问题

回答

相关问题