Html Div 边框不显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16874084/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Div borders not showing
提问by user2443444
I'm struggling to find a direct answer to my problem due to the many variations in peoples code.
由于人们代码的许多变化，我正在努力寻找我的问题的直接答案。
I imagine my code is probably very messy as i'm trying to build a website for my partner, and quickly (i have just a few hours Dreamweaver experience and that's it)!
我想我的代码可能非常混乱，因为我正在尝试为我的合作伙伴建立一个网站，而且很快（我只有几个小时的 Dreamweaver 体验，仅此而已）！
Anyway, i have a fixed width website where there are around 6 separate divs in a column, all contained within a webpage-sized div for my background colour.
无论如何，我有一个固定宽度的网站，其中一列中有大约 6 个单独的 div，所有这些 div 都包含在我的背景颜色的网页大小的 div 中。
Anyway, when i am trying to add a border to my footer, it does not display in browsers. I just wan 1px to separate the 'main' div from the footer and it won't appear. This is also the same for my navigation div.
无论如何，当我尝试向页脚添加边框时，它不会显示在浏览器中。我只是想要 1px 将“主”div 与页脚分开，它不会出现。这对于我的导航 div 也是一样的。
body{
color:#00000;
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom:0px;
}
#body{
background-color:#000000;
}
#header{
width:800px; /* The width is fixed by pixels */
height:150px; /* The height is fixed by pixels*/
color:#fff;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
}
#navigation {
width:798px;
height:51px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
border-style:solid; /*Selecting solid made the border appear*/
border-left:1px;
border-right:1px;
border-top:0px;
border-bottom:1px;
border-color:#000000;
text-align:center;
background-color:ffffff;
}
#main {
width:798px; /* The width is fixed by pixels */
height:800px; /* The height is fixed by pixels*/
color:#fff;
background-color:#fff;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
border-style:solid; /*Selecting solid made the border appear*/
border-left:1px;
border-right:1px;
border-top:0px;
border-bottom:0px;
border-color:#000000;
text-align:center;
}
#footer {
/*Styling for any element with the id="container" */
width:798px; /* The width is fixed by pixels */
height:100px; /* The height is fixed by pixels*/
color:#fff;
background-color:#fff;
margin-left: auto;
margin-right:auto;
border-style:solid;
border-left:1px;
border-right:1px;
border-bottom:1px;
border-top:1px;
border-color:#000000;
}
#Facebook {
float:right;
}
#Twitter {
float:right;
}
#LinkedIn {
float:right;
}
</style>
</head>
<body>
<div id="body">
<div id="header">
<a href="Home.html"><img src="Images/Logo.jpg" alt="Ruth Fifer Jewellery"> </a>
</div>
<div id="main">
<div id="navigation">
<br />
</div>
<br />
<br />
<img src="Images/Home Image.jpg" />
</div>
<div id="footer">
<a href="https://www.facebook.com/ruth.fifer.5?fref=ts" target="_blank"> <img src="Images/facebook.png" alt="Facebook" id="Facebook"/></a>
<a href="https://twitter.com/martynjakins" target="_blank"> <img src="Images/twitter.png" alt="Twitter" id="Twitter"/></a>
<a href="http://www.linkedin.com/profile/view?id=225071408&trk=tab_pro" target="_blank"><img src="Images/linkedin.png" alt="LinkedIn" id="LinkedIn"/></a></div>
</div>
</body>
If anyone is able to help it would be great, as i get the feeling I'm probably using conflicting codes due to my inexperience but don't have time to learn everything right now and will instead go back at a point where i have more time to adjust things.
如果有人能够提供帮助，那就太好了，因为我觉得由于我的经验不足，我可能正在使用相互冲突的代码，但现在没有时间学习所有内容，而是会在我有更多内容的地方返回是时候调整一下了。
Thanks,
谢谢，
Martyn
马丁
回答by Ziyaddin Sadigov
1) Write <!DOCTYPE><html><head>tag in the beginning of the code.
1）<!DOCTYPE><html><head>在代码的开头写标签。
2) Write </html>tag in the end of the code.
2）</html>在代码末尾写标签。
AND USE:
并使用：
border: 1px 0px solid #000000;
边框：1px 0px 实心 #000000;
And it will solve your problem. Look at http://jsfiddle.net/p2269/1/I wrote code as I explained and it shows borders.
它会解决你的问题。查看http://jsfiddle.net/p2269/1/我按照我的解释编写了代码，它显示了边框。
回答by F. Gálvez
Your code is incomplete, I think...
你的代码不完整，我想......
Here you have a working example.
这里有一个工作示例。
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body{
color:#00000;
margin-left:0px;
margin-right:0px;
margin-top:0px;
margin-bottom:0px;
}
#body{
background-color:green;
}
#header{
width:800px; /* The width is fixed by pixels */
height:150px; /* The height is fixed by pixels*/
color:#fff;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
}
#navigation {
width:798px;
height:51px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
border-style:solid; /*Selecting solid made the border appear*/
border-left:1px;
border-right:1px;
border-top:0px;
border-bottom:1px;
border-color:#000000;
text-align:center;
background-color: yellow;
}
#main {
width:798px; /* The width is fixed by pixels */
height:800px; /* The height is fixed by pixels*/
color:#fff;
background-color:blue;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:0px;
border-style:solid; /*Selecting solid made the border appear*/
border-left:1px;
border-right:1px;
border-top:0px;
border-bottom:0px;
border-color:#000000;
text-align:center;
}
#footer {
/*Styling for any element with the id="container" */
width:798px; /* The width is fixed by pixels */
height:100px; /* The height is fixed by pixels*/
color:#fff;
background-color:red;
margin: 0 auto;
border-top: 3px solid white;
}
#Facebook {
float:right;
}
#Twitter {
float:right;
}
#LinkedIn {
float:right;
}
</style>
</head>
<body>
<div id="body">
<div id="header"> </div>
<div id="main">
<div id="navigation">
<br />
</div>
</div>
<div id="footer"> </div>
</div>
</body>
</html>
