为什么15％85％不给100％. Web布局HTML / css

发布时间：2020-12-14 19:46:09 所属栏目：资源来源：网络整理

导读：HTML中的绝对初学者.这是一个布局问题.我有一个宽100％的标题我想要导航的导航部分应该是页面的15％,而其余85％应该显示一些内容.使用页脚结束网页. 样式： body { margin:40px;padding:5px }#header { background-color:black; color:white; text-align:ce

HTML中的绝对初学者.这是一个布局问题.我有一个宽100％的标题
我想要导航的导航部分应该是页面的15％,而其余85％应该显示一些内容.使用页脚结束网页.


样式：

body { margin:40px;
padding:5px }

#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
    height:200px;
    width:100%

}

#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:15%;
    float:left;
    padding:5px;
    display:inline-block;

}

#section {
    float:left;
    background-color: red;
    width:85%;
    display:inline-block; 
    padding:5px;  
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
   padding:5px;
   width:100%;  

}

但我收到的是我解释为15％和85％不等于100％(相对于导航的WTH较低？我测试了83％而不是正确但是“红色”与标题没有完全重叠

我该怎么做才能做到对？


最佳答案
这里的问题是填充被添加到您的容器宽度.因此,每侧85％宽度5px,导致宽度大于85％.
你可以通过添加以下代码来解决这个问题：box-sizing：border-box;

#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:15%;
float:left;
padding:5px;
display:inline-block;
box-sizing:border-box;

}

#section {
float:left;
background-color: red;
width:85%;
display:inline-block; 
padding:5px;  
box-sizing:border-box;
margin-left:-5px; /* margin-left: -5px has to be done to fix the display:inline-block; default margin*/
}

另外我不建议对一个元素使用inline-bock和float.你应该决定float还是inline-block.
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!