边距：0 自动； 连接到外部 css 时不工作
[英]margin: 0 auto; not working when linked to external css
问题描述
When I linked to my external style-sheet, it seems my wrapper styles are broken.
当我链接到我的外部样式表时，我的包装器 styles 似乎坏了。 If I paste the styles into the head on my index.html, it works just fine, but not when linking to a.css.如果我将 styles 粘贴到我的 index.html 的头部，它工作得很好，但在链接到 a.css 时就不行了。 All other css rules work perfectly either way, only the wrapper style appears to break.所有其他 css 规则无论哪种方式都可以完美运行，只有包装器样式似乎中断了。
The only rule applied to the wrapper is to center it within the browser, so if there is another reasonable way to accomplish this I'm all ears.应用于包装器的唯一规则是将其置于浏览器中，所以如果有另一种合理的方法来实现这一点，我会全力以赴。
the wrapper css:包装 css：
#wrapper {
width: 960px;
margin: 0 auto;
}
and the html (minus content):和 html（减去内容）：
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="nav">
</div>
<div id="content">
<div id="cont_left">
</div>
<div id="cont_right">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
Any help or advice would be great.任何帮助或建议都会很棒。
EDIT: here is the full css:编辑：这是完整的 css：
#wrapper {
width: 960px;
margin: 0 auto;
}
#header {
width: 960px;
height: 144px;
background-image: url(../images/header.jpg);
background-repeat: repeat-x;
margin-bottom: -14px;
}
#logo {
margin-right: 48px;
margin-top: 33px;
float: right;
}
#logo a img {
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#tagline {
margin-top: 90px;
margin-left: 48px;
float: left;
clear: both;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-style: normal;
color: #CCC;
}
#nav {
width: 960px;
height: 48px;
background-image: url(../images/nav_bar.jpg);
background-repeat: repeat-x;
}
#nav_bar {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: bold;
margin-left: -50px;
padding-top: 14px;
}
#nav_bar li {
display: inline;
padding-left: 58px;
}
#nav_bar li a {
text-decoration: none;
color: #999;
padding: 4px;
}
#nav_bar li a:hover {
color: #fff;
background-color: #666;
}
.current {
color: #CCC;
}
#content {
float: left;
width: 960px;
background-image: url(../images/content.jpg);
background-repeat: repeat-x;
}
#cont_left {
width: 40%;
margin: 48px;
float: left;
}
#cont_right {
width: 40%;
margin: 48px;
float: right;
}
#footer {
clear: both;
height: 48px;
width: 960px;
background-image: url(../images/footer.jpg);
background-repeat: repeat-x;
}
#footer_list {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #666;
font-style: normal;
text-align: center;
padding-top: 16px;
}
#footer_list li {
display: inline;
padding: 18px;
}
#footer_list li a {
text-decoration: none;
color: #666;
padding: 4px;
}
#footer_list li a:hover {
color: #000;
text-decoration: underline;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 48px;
line-height: 20px;
font-weight: normal;
margin: 0px;
padding-top: 0px;
padding-bottom: 12px;
}
p {
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 20px;
}
body {
background-image: url(../images/background.jpg);
background-repeat: repeat-x;
}
EDIT TO ADD: Website is not live, therefore I have no link to provide, sorry.编辑添加：网站没有上线，因此我没有提供链接，抱歉。 Still in early development stages, got stuck on this issue.仍处于早期开发阶段，被困在这个问题上。
5 个解决方案
解决方案1
1 2011-07-08 15:41:07
View source of the page you are using and click on the CSS document you link you have linked.查看您正在使用的页面的源代码，然后单击您已链接的 CSS 文档。 It should pull up a CSS page with your styles, if not, you're either 1) not linking it correctly or 2) there is a permissions issue on the server.它应该使用您的 styles 拉出 CSS 页面，如果没有，您要么 1) 未正确链接它，要么 2) 服务器上存在权限问题。
ADD: Check it in developer tools (F12 -> IE, left-click>inspect Element -> chrome, Firefox).添加：在开发人员工具中检查它（F12 -> IE，左键单击>检查元素 -> chrome，Firefox）。
解决方案2
1 2011-07-08 15:47:32
What browser are you using?你使用的是什么浏览器？ I've just tried your sample in IE8 and it won't centre at all unless I include the XHTML doctype:我刚刚在 IE8 中尝试了您的示例，除非我包含 XHTML 文档类型，否则它根本不会居中：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
No idea why, or if you have this or not, but it may help.不知道为什么，或者你是否有这个，但它可能会有所帮助。
解决方案3
0 2020-09-17 03:47:04
If I accidently copy the style tags into my external style sheets, and don't remove them, I get a margin all the way around my page.如果我不小心将样式标签复制到我的外部样式表中，并且没有删除它们，我会在页面周围得到一个边距。
Could you have accidently forgotten to remove your style tags?您是否会不小心忘记删除样式标签？
解决方案4
0 2011-07-08 15:37:22
I have never had this problem before.我以前从未遇到过这个问题。 You may not have the link correct您可能没有正确的链接
Make sure that you attached you style sheet correctly:确保您正确附加了样式表：
<link href="Default.css" rel="stylesheet" type="text/css" />
If it is in a folder (say Styles for ex):如果它在一个文件夹中（例如 Styles 例如）：
<link href="Styles/Default.css" rel="stylesheet" type="text/css" />
If your webpage is in a folder then you need to add "../" to the front如果您的网页在文件夹中，则需要在前面添加“../”
<link href="../Styles/Default.css" rel="stylesheet" type="text/css" />
You can also try !important你也可以试试!important
#wrapper {
width: 960px;
margin: 0 auto !important;
}
If that does not work, then right click the wrapper element and click "inspect element" in chrome.如果这不起作用，则右键单击wrapper元素并单击 chrome 中的“检查元素”。 This will show you all applied css on that element, and what has been over written by what.这将向您展示所有在该元素上应用的 css，以及被什么覆盖的内容。 This will give you a better idea of what is actually going on (downloading Firebug for firefox is also helpful)这将使您更好地了解实际发生的情况（下载 firefox 的 Firebug 也很有帮助）
解决方案5
0 已采纳 2011-07-08 15:52:09
It will not make a difference whether your css rule is in an external stylesheet or in a <style> tag in head.您的 css 规则是在外部样式表中还是在头部的 <style> 标记中，都没有区别。 Things to try;要尝试的事情；
Validate your css file (will inform you of typos) http://jigsaw.w3.org/css-validator/
验证您的 css 文件（将通知您拼写错误） http://jigsaw.w3.org/css-validator/Do you have multiple css files?
你有多个 css 文件吗？ If so, try to include this stylesheet last.如果是这样，请尝试最后包含此样式表。Use firebug (or chrome inspector if you prefer) to inspect your #wrapper element, to see if your definition show up at all (and if its overruled and by what).
使用 firebug（或 chrome 检查器，如果您愿意）检查您的 #wrapper 元素，以查看您的定义是否完全显示（以及它是否被否决以及被什么否决）。
I would love to see your entire solution if possible, so i can poke around:)如果可能的话，我很想看看你的整个解决方案，所以我可以四处逛逛：）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.