Html IE7李不在同一排_Html_Css_Internet Explorer 7_Html Lists_Inline

Html IE7李不在同一排

html css

Html IE7李不在同一排,html,css,internet-explorer-7,html-lists,inline,Html,Css,Internet Explorer 7,Html Lists,Inline,我正在为一个网站创建一个菜单，菜单是由李的。在Chrome和Firefox中，一切都很完美，但在IE7中，li在同一排，但彼此堆叠在一起我做了一些研究并尝试了以下解决方案：添加“Float”属性添加“宽度”属性将“缩放”属性集添加到1 将“空白：nowrap”添加到ul 也许还有一些我不记得了。他们中没有人工作这是我目前的html： <ul id="menu"> <li><a href="#">Home&l

我正在为一个网站创建一个菜单，菜单是由李的。在Chrome和Firefox中，一切都很完美，但在IE7中，li在同一排，但彼此堆叠在一起

我做了一些研究并尝试了以下解决方案：

添加“Float”属性
添加“宽度”属性
将“缩放”属性集添加到1
将“空白：nowrap”添加到ul

也许还有一些我不记得了。他们中没有人工作

这是我目前的html：

<ul id="menu">
                    <li><a href="#">Home</a></li>
                    <li>
                        <a href="#">1</a>
                        <ul id="submenu">
                            <li>a</li>
                            <li>b</li>
                            <li>c</li>
                        </ul>
                    </li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                </ul>

显然问题出在我使用的测试仪上。我用我爸爸的旧laptot加上“zoom:1”和“*display:inline”解决了这个问题。
很抱歉给您添麻烦。

因为这个问题已经被其他人投票了，所以我毫无保留地回答了这个问题，而且它还与交叉浏览器兼容。祝你好运，并有一个美好的一天

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
    #menu{
        float:right;
    }
    #menu li {
        width: 150px;
        height: 44px;
        border-left: 1px solid silver;
        float: left;
    }
    #submenu {
        margin:0;
    }
</style>
</head>
<body>
<ul id="menu">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">1</a>
        <ul id="submenu">
            <li>a</li>
            <li>b</li>
            <li>c</li>
        </ul>
    </li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
</ul>


JS-Bin
#菜单{
浮动：对；
}
#菜单里{
宽度：150px；
高度：44px；
左边框：1px纯银；
浮动：左；
}
#子菜单{
保证金：0；
}




a
b
c

如果您自己找到了答案，请用该答案回答此问题。ie7可能会在“*display:inline；”上出错，在一个样式中，在一个样式前面加*可能会导致该样式的其余部分位于一个单独的位置：相对；

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
    #menu{
        float:right;
    }
    #menu li {
        width: 150px;
        height: 44px;
        border-left: 1px solid silver;
        float: left;
    }
    #submenu {
        margin:0;
    }
</style>
</head>
<body>
<ul id="menu">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">1</a>
        <ul id="submenu">
            <li>a</li>
            <li>b</li>
            <li>c</li>
        </ul>
    </li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
</ul>