css - 为什么我的 Div 标签被向左推了几个像素？

Question

我正在尝试为一些课程建立一个网站，但由于某种原因，我的两个中间栏被推到了左边。页眉、导航栏和页脚都垂直对齐，但中间的两个浮动 div 被强制向左。

HTML

<html>
<head>
    <title>Churches Of Norwich</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="site.css"> 
</head>

<body>
     <div id="bg"> 
        <div id="content">
            <div id="headboxspacer"></div>
            <div id="head-box">Churches of Norwich</div>
            <div id="navbar" style="float: none">
                <div id="tabs">
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="map.html">Map</a></li>
                        <li><a href="churches.html">Churches</a></li>
                        <li><a href="comments.html">Comments</a></li>
                        <li><a href="gallery.html">Gallery</a></li>
                    </ul>
                </div>
            </div>
            <div id="container" style="overflow:hidden;width: 100%">
                <div id="homeboxleft" style="clear: both">Testing</div>
                <div id="homeboxright" style="clear: both" >Right</div>
            </div>
            <div id="footer"> footer </div>
            <div id="bottomspacer"></div>
        </div>
    </div>
</body>
</html>

CSS

#content {
width: 1200px ;
height: max-content;
margin-left: auto ;
margin-right: auto ;
}

#headboxspacer{
height:50px;
width:100%;
}

#head-box{
background-color: #003651;
height: 120px;
width: 100%;
padding: 10px;
margin: 5px;
text-orientation: inherit;
font-family: sans-serif;
font-size: 65pt;
color: #FEE7BE;
font-style: normal;
text-align: center;
}

#navbar{
height: 50px;
background-color: #003651;
width: 100%;
margin: 5px;
padding: 10px;

font-family: sans-serif;
font-size: 20pt;
color: #FEE7BE;
font-style: normal;
text-align: center;
text-decoration-line: underline;;
width: 100%;
} 

#tabs ul {
margin: 0 ;
padding: 0 ;
list-style: none ;
display: inline ;
}

#tabs ul li {
margin: 0 ;
padding: 10px ;
display: inline ;
text-align: center ;
list-style: none ;
font-family: Arial, Helvetica, sans-serif ;
}

#tabs li a {
color: #FEE7BE;
background-color: #003651 ;
padding: 8px ;
text-decoration: none ;
display: inline ;
} 

#tabs li a:hover {
color: gainsboro ;
background-color: #003651 ;
}

#container{
width: 1200px;
}

#homeboxleft{
background-color: #FEE7BE;
height: 500px;
width: 50%;

float: right;

margin: 0px;
opacity: 10%;
filter:alpha(opacity=10);

text-orientation: inherit;
font-family: sans-serif;
font-size: 10pt;
color: #003651;
font-style: normal;
text-align: center;
}

#homeboxright{
background-color: #FEE7BE;
height: 500px;
width: 50%;
float: left;    
margin: 5px;
text-orientation: inherit;
font-family: sans-serif;
font-size: 10pt;
color: #003651;
font-style: normal;
text-align: center;
}

#mainbox{

background-color: #FEE7BE;
height: 500px;
width: 100%;
opacity: 0.6; 
}

#footer{
background-color: #003651;
height: 120px;
width: 100%;
padding: 10px;
margin: 5px;
text-orientation: inherit;
font-family: sans-serif;
font-size: 65pt;
color: #FEE7BE;
font-style: normal;
text-align: center;
clear: both;
}

#bottomspacer{
height:100px;
width:100%;
}

score 1 · Accepted Answer

因为导航栏的填充被添加到导航栏的宽度。

您必须使用带有内部 div 的盒子模型解决方案 http://css-discuss.incutio.com/wiki/Box_Model_Hack#Box-in-a-box

那么你在所有浏览器中都有相同的宽度和外观

score 1 · Accepted Answer

我还附上了截图。

这是小提琴的全屏预览：

http://fiddle.jshell.net/zHBhs/2/show/

我认为你的问题是这里的内联 css：

<div id="homeboxleft">Testing</div>
<div id="homeboxright">Right</div>
//-------------------^-------------just removed the clear:both inline css here

并且在您的这个 css 类中刚刚删除了 margin 属性：

#homeboxright{
    background-color: #FEE7BE;
    height: 500px;
    width: 50%;
    float: left;
    margin: 0; //  <------------------made margin for all sides to 0
    text-orientation: inherit;
    font-family: sans-serif;
    font-size: 10pt;
    color: #003651;
    font-style: normal;
    text-align: center;
}

试试这个，看看这是否解决，在这里检查小提琴：http: //jsfiddle.net/zHBhs/2/

也对这些 css 类做一些工作：

#head-box{
    padding:0;    // change paddings to 0
    margin: 5px 0; // just apply to top and bottom margins
}

#navbar{
    margin: 0;      // change paddings to 0
    padding:10px 0; // just apply to top and bottom margins
}

#footer{
   margin: 0;      // change paddings to 0
   padding:10px 0; // just apply to top and bottom margins
}

在此处输入图像描述

score 0 · Accepted Answer

在主 div 中获取左右两边。然后应用这个css：

#maindiv{
overflow:hidden;
border-bottom:1px solid rgba(200,200,200,0.3);
border-top:1px solid rgba(200,200,200,0.3);
}
#left{
width:60%;
float:left;
overflow:hidden;
}
#right{
overflow:hidden;
}

注意：右边的 div 会和左边的 div 连在一起，如果要向右浮动，应用 float:right; 给它。但建议只向左浮动:)

双方使用上述技巧的示例。

score 0 · Accepted Answer

包含两列的“容器”设置为“宽度 = 100%”。这意味着 div 将分布在页面的整个宽度上。

尝试删除此宽度属性，然后删除所有浮动属性。

css - 为什么我的 Div 标签被向左推了几个像素？

4 回答 4

Related

Reference