Question

我设置了一个简单的网页来测试一个以浮动div为中心的方法。它应该使按钮居中并让它们全部向左浮动。在chrome中，按钮不会浮动。当我检查元素时，它显示浮动被覆盖。我检查了整个文件，并没有任何浮动：没有，但是铬说有。在Internet Explorer中，该网站显示正常。这是chrome默认的问题吗？我如何解决它？根据我的学习，CSS优先考虑更具体的订单，因此li css中的float：left应覆盖任何Chrome默认值...

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Center Floated Div</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>
    <body>
        <div id="content">
            <div id="nav">
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="contact.html">Contact</a></li>
                </ul>
            </div>
        </div>
    </body>
</html>

CSS：

html {
    margin: 0;
    padding: 0;
    }
body {
    background-color: #32127A;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    }

#nav {
    float :right;
    position :relative;
    left :-50%;
    text-align :left;
}
#nav ul {
    list-style :none; 
    position :relative;
    left :50%;
}

#nav li {
    float: left
    position: relative; /* ie needs position:relative here*/
    }

#nav a {
    text-decoration :none;
    margin :10px;
    background :red;
    float:left;
    border :2px outset blue;
    color :#fff;
    padding :2px 5px;
    text-align :center;
    white-space :nowrap;
}

#nav a:hover{
    border: 2px inset blue;
    color: red;
    background: #f2f2f2;
    }

#content {
    overflow: hidden /* hide horizontal scrollbar*/
    }

Answer 1

您的代码在浮动后没有分号。如果问题仍然存在，则应在规则后添加!important。

Answer 2

在css中浮动之后，你错过了;。你需要关闭它。

DEMO （使用缺少的;）

漂浮在铬上的左侧被覆盖

2 个答案: