将动态宽度的盒子居中

Question

伪 HTML

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

我希望它看起来像这样

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

但实际上显示的是

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

li元素被左浮动。ul元素设置了overflow：auto属性。如何让ul元素的宽度适应其内容，而不是尽可能地宽，以便我可以使用自动边距将其居中？

- Bart van Heukelom

Answer 1

尝试：

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

您可能还想尝试添加：

li { display: inline; }

- cletus

---

我还需要为它设置一个高度，所以必须是块级元素。我目前在实际版本中使用的是 inline-block，但 IE7 不支持。 - Bart van Heukelom

发现一种让IE7模拟inline-block的方法，即设置display:inline和zoom:1。 - Bart van Heukelom

Answer 2

在这种情况下，将div和li的高度设置为内联，就像Cletus先生所说的那样。

或者放弃并使用，尽管这会让CSS警察在凌晨3点敲响你的门。

在旧时代，我们只使用和，并不知道这是错误的。就像在20世纪70年代吸烟或在80年代听Rick Astley一样。我们都这样做，有时候我们认为没有人在通过验证器运行我们。

- Christopher Gutteridge

---

内联元素不允许设置高度。 - Bart van Heukelom

Answer 3

使用IE hack与display: inline-block：

zoom: 1;
display: inline;

- Bart van Heukelom