Question

我的新投资组合网站应该有一个标题，其中包含我的名字，主导航和社交菜单。所以我制作了一个带有三个div的标题，每个div的宽度为33％。我现在的问题是，只要我把位置：固定在那里，标题就会不断扩大。这只是我应用一些填充或边距的情况，所以这可能是我的问题，但我不知道如何解决这个让我疯狂了几个小时的问题。也许你们中的一些人可能会帮忙吗？会很感激的！

<!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;
}

Answer 1

您需要从.header中删除边距，但我也将其从.container中移除以保持一致。您添加的Amy边距将覆盖您的容器宽度，即使您有边框框运行，填充也不会。

＆＃13;

*{
    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; */
  margin: 0;
    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;
}

＆＃13;

<!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>

＆＃13;

标题不断扩展到浏览器窗口之外

1 个答案: