HTML/CSS：使用最小宽度创建居中的div

我希望在我的页面上有一个以居中且具有一定宽度的div，但如果内容需要，该宽度超出该宽度。我用下面这样：HTML/CSS：使用最小宽度创建居中的div

<!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" xml:lang="en" lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
     <style type="text/css"> 
      .container-center { 
       text-align: center; 
      } 
      .container-minwidth { 
       min-width: 5em; 
       display: inline-block; 
       border: 1px solid blue; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="container-center"> 
      <div class="container-minwidth"> 
       a 
      </div> 
     </div> 
    </body> 
</html>

这个工作在Firefox/Safari浏览器不错，但不是在IE6，这并不了解display: inline-block。有关如何在IE6上进行这项工作的任何建议？

来源

2009-02-02 avernet

海事组织它应该只留下在IE6上看起来不好。 – 2010-06-10 00:42:54

它不是一个完美的解决方案，但我已经解决了IE6缺少支持最小宽度的一些问题。

<style type="text/css">    
      .container-minwidth { 
       min-width: 5em; 

       width: auto !important; 
       width: 500px; /* IE6 ignores the !important tag */ 

       /* would help for expanding content if it blows past 500px; */ 
       overflow:auto; 

       display: inline-block; 
       border: 1px solid blue; 
      }   
</style>

另一个可能有助于这种情况的标签是溢出标签。

来源

2009-02-02 04:49:06 bendewey

其实Alessandro IE6的确了解display: inline-block，它不了解你的代码是min-width。有many hacks to get this to work，但我不会推荐他们中的任何一个。如果你打算使用它们中的任何一个，请确保将它们放入IE6特定样式表中，以免它影响其他更标准的投诉浏览器。

来源

2009-02-02 04:49:51

<style type="text/css">    
     .container-minwidth { 
      min-width: 5em; 
      _width: 500px; 
      white-space:nowrap; 

      display: inline-block; 
      *display:inline; 
      *zoom:1; 

      border: 1px solid blue; 
     }   
</style>

来源

2012-05-07 02:45:37 Jace

您可能想要解释您的答案是否有利于OP – Luca 2012-10-20 01:06:13

HTML/CSS：使用最小宽度创建居中的div

回答

相关问题