【发布时间】：2017-04-11 10:55:33
【问题描述】：
我的新作品集网站应该有一个标题，其中包含我的名字、主导航和社交菜单。所以我制作了一个包含三个 div 的标题，每个 div 的宽度为 33%。我现在的问题是，只要我将 position:fixed 放在那里，标题就会不断扩大。只有当我应用了一些填充或边距时才会出现这种情况，所以这可能是我的问题，但我不知道如何解决这个让我疯狂几个小时的问题。 也许你们中的一些人可以提供帮助？将不胜感激！
<!DOCTYPE html>
<html lang="en" class="no-js">
<body>
<div class="container">
<div class="header">
<div class="site-title">
Hello World
</div>
<div class="main-menu">
<ul class="main-menu">
<a href="work.html"><li>Work</li></a>
<a href=""><li>Curriculum</li></a>
<a href="contact.html"><li>Contact</li></a>
</ul>
</div>
<div class="social-menu">
<ul class="social-menu">
<a href="#"><li class="fa fa-envelope"></li></a>
<a href="#"><li class="fa fa-twitter"></li></a>
<a href="#"><li class="fa fa-dribbble"></li></a>
<a href="#"><li class="fa fa-youtube-play"></li></a>
<a href="#"><li class="fa fa-500px"></li></a>
</ul>
</div>
</div>
<div class="content">
</div>
</div>
</body>
</html>
*{
margin: 0em;
padding: 0em;
border: 0em;
text-decoration: none;
list-style: none;
color: #333;
}
html{
width: 100%;
height: 100%;
position: relative;
}
body{
width: 100%;
height: 100%;
position: relative;
}
container{
margin: 3em;
overflow: auto;
}
.content{
height: 2000px;
}
.container:before,
.container:after {
content : "";
display : table;
}
.container:after {
clear : both;
}
.header{
width: 100%;
position: fixed;
z-index: 100;
margin: 3em;
background-color: burlywood;
}
.site-title{
float:left;
display: inline-block;
width: calc(100%/3);
position: relative;
background-color: beige;
}
div.main-menu{
margin:0 auto;
display: inline-block;
width: calc(100%/3);
text-align: center;
background-color: cadetblue;
}
.main-menu a{
display: inline-block;
}
div.social-menu{
float: right;
width: calc(100%/3);
display: inline-block;
text-align: right;
}
【问题讨论】：
-
flexbox 没有正确回答问题（这是一个边距问题）。
标签： html css header margin padding