gpt4 book ai didi

html - 没有 float LI 的水平列表

转载 作者:行者123 更新时间:2023-11-28 05:06:29 25 4
gpt4 key购买 nike

好的,我正在为使用无序列表组织菜单的导航栏编写 CSS。菜单居中,没有被推到任何一边,任何给定 li 元素的宽度都无法预先确定(它会随着菜单项中文本的多少而变化),所以我无法对宽度进行硬编码。

我有以下 CSS 代码:

#nav ul {
list-style: none;
padding-bottom: 10px;
height:16px;
}
#nav ul li {
position: relative;
display: inline-block;
}
#nav {
position: relative;
margin-top: -30px;
text-align: center;
font-family: Arial,STHeiti,'Microsoft YaHei',sans-serif;
font-size: 14px;
}

对于 nav 元素,这非常适合在 Chrome 13 中生成居中的导航菜单。但是当我在 IE8 中查看页面时,UL 变成垂直的,我无法让它变成水平的。

到目前为止,搜索结果表明我需要 float:left;float:right;

  • 来使菜单水平。我试过这个,它确实使 IE8 中的菜单水平,但它会向左或向右浮动。我需要将菜单居中,显然没有 float:center;

    菜单对应的HTML是

    <div id="nav">
    <ul>
    <li class="current_page_item">[LINK]</li>
    <li class="page_item">[LINK]</li>
    <li class="page_item">[LINK]</li>
    </ul>
    </div>

    有没有什么方法不需要知道 LI 的宽度或不必求助于 JS 来使菜单居中和水平?

  • 最佳答案

    该代码在 IE8 中运行良好,请自行查看:

    http://jsfiddle.net/bEEEb/

    它可能对你不起作用,因为你没有处于 IE8 模式(IE7 模式或 Quirks 模式是替代方案)。

    如果没有文档类型,请在第一行添加:

    <!DOCTYPE html>

    如果您需要它也能在 IE7 中工作(其中 inline-block 默认仅适用于自然内联元素),那么 replace display: inline-block与:

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

    ..当然,如果您可以使用 display: inline,这是最简单的解决方法,但您仍然应该弄清楚为什么您的页面无法在 IE8 模式下显示。

    关于html - 没有 float LI 的水平列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6944550/

    25 4 0