将动态宽度框居中

Question

伪HTML

<div>
 <ul>
  <li>Nav 1</li>
  <li>Nav 2</li>
 </ul>
</div>

我希望这看起来像

[DIV---------------[UL nav1 nav2]----------------------]

相反，我得到

[DIV[UL nav1 nav2-----------padding-------------------]]

李的浮动。 ul有溢出：auto。如何让ul尽可能宽，而不是尽可能宽，所以我以自动边距为中心？

Answer 1

尝试：

div { text-align: center; }
ul { display: inline; }

您可能还想尝试添加：

li { display: inline; }

Answer 2

在这种情况下，在div和li上设置高度，但是将它们设为内联，就像克莱图斯先生所说的那样。

或者放弃并使用<table>，虽然这会让css警察在凌晨3点敲门。

在过去，我们只使用了<table>和<img>，并且不知道这是错误的。就像在20世纪70年代吸烟一样，或者在20世纪80年代听里克阿斯特利。我们都做到了，当我们认为没有人通过验证器运行我们时，我们仍然会做一次。

Answer 3

将display: inline-block与IE hack一起使用：

zoom: 1;
display: inline;