在改变内容的同时保持内联<li>的位置</li>

Question

我的网站在页面顶部附近有一个由内联<li>组成的导航栏。酒吧本身必须居中。点击其中某些<li>内的链接会替换<select>的链接。

我的问题是这样：当出现<select>时，他们将所有其他<li>移过来以适应他们的宽度。不幸的是，我似乎无法设置内联<li>的宽度属性。因此，我尝试将<li>的浮动向左，然后指定宽度。这解决了位置偏移问题，但现在导航栏没有居中！

有人能帮我找出解决这个问题的最佳方法吗？

Answer 1

您可以尝试使用inline-block选项，尽管doesn't work reliably in IE < 8，因为它仅支持“自然”内联的元素（select是{，}}，但{ {1}}本身不是。）

Answer 2

如果您在<select>标记内创建<li>，则可以将列表项视为容器，然后绝对定位选择。

<li><select></select></li>

然后是css：

li{position:relative;} select{position:absolute;}

这样选择不会影响周围元素的位置。

Answer 3

为<li>指定宽度。这解决了转变问题，但现在你需要将它们集中起来。因此，在所有<li>周围放置一个容器，并将此容器放在中心位置。适用于所有浏览器。

您可能已经有<ul>用于此目的，可能已经在<div>或其他内容中。那会很方便。如果您的标记不是那样的，只需将另一个<div>包裹在整个事物周围并将其居中。