<分区>
<分区>
我设置了一个简单的网页来测试使 float div 居中的方法。它应该使按钮居中并让它们全部向左浮动。在 chrome 中，按钮没有 float 。当我检查元素时，它显示 float 已被覆盖。我检查了整个文档，没有任何 float :没有，但是 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*/
}
最佳答案
您在 css 中的 float 之后缺少 ;。你需要关闭它。
DEMO (处理缺失的;)
关于html - float 在 chrome 中被覆盖，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26073361/
相关文章：
javascript - 如何将 DOM 对象绑定(bind)到 JS 对象
javascript - 显示隐藏的第 n 个子项 onclick
jquery - 简单的 Bootstrap 导航栏不会在移动设备上折叠
javascript - 如何通过从外部源(数据库)提取值来动态调整 chrome 扩展的 manifest.json 的 "matches"键？
html - 如何让我的 CSS div 到 "stick"到背景图像上的同一位置，即使浏览器在水平和垂直方向都调整了大小？