-3

我正在尝试减少网站 slicknav-menu 和 top-part 上两个元素之间的空间。我该怎么做？

下面是css代码 

#banner {
        /*background: url("assets/upload/compressed.jpg") no-repeat center center fixed;*/

}

#banner .big-text {
  /*color: white;*/
  /*color: #7dcbbb;*/
  /*font-size: 2.5em;*/
  /*margin-top: 80px;*/
  /*font-weight: 0;*/

}

#banner .small-text {
  /*color: white;*/
  /*color: #7dcbbb;*/
  /*font-size: 2em;*/

}



@media (max-width: 350px){
    #banner .big-text {
      /*color: black;*/
    }
    #banner .small-text {
      /*color: black;*/
    }



}

.slicknav_menu {
    display:none;
}

#top_part{
    margin-bottom: 0 auto;

}

#work{
    margin-bottom: 50px;
}

@media screen and (max-width: 50em) {
    /* #menu is the original menu */
    .js .navbar {
        display:none;
    }

    .js .slicknav_menu {
        z-index: -1;
        display:block;
        color: white;
        float: right;
        background: black;
        right: 0px;
        position: fixed;
        margin-top: -3px;
    }
}

@media screen and (max-width: 1100px) {
    #work-preview li {
        width: 49%;
    }
}

@media screen and (max-width: 800px) {
    #top_part{
        margin-bottom: 150px;
    }
}

@media screen and (max-width: 700px) {
    #work-preview li {
        width: 99%;
    }
}

@media screen and (max-width: 400px) {    
    #top_part{
        margin-bottom: 100px;
    }
}

这里还有一些 html 代码。背景中有一个横幅，我正在尝试减少顶部链接和当前位于页面中间的第一个文本元素之间的空间，但我想拉它向上

<body>


        <!-- NAVIGATION START -->
        <div class="navigation">
            <!-- START LOGO -->
            <div class="logo-wrapper" id="logo-wrap">
                <a id="logo" href="index.htm">Title</a>
            </div><!-- END LOGO -->
            <ul class="navbar">
                <!-- <li class="{% if this.page.id == 'home' %}active{% endif %}"><a href="{{ 'home'|page }}">Home</a></li> -->
                <li class=""><a href="link1.htm">Link 1</a></li>

            </ul>
        </div>
        <!-- NAVIGATION END -->

        <!-- Content -->
        <section id="layout-content">
            <!-- START PAGE WRAPPER -->
            <div id="page-wrapper">
                <!-- START BANNER SECTION -->
                <section id="banner" class="section parallax" style='background-image:  url("assets/ttg.png")'>
                    <div class="banner-container">
                        <div id="top_part">

                            <span class="big-text">Site title</span><br>
                            <span class="small-text">
                                 Site description<span class="bold"> </span>
                            </span>
                        </div>

                  <div id="bottom_part">
                            <div class="button-wrapper">
                                <a class="button scrollto" href="#work1">Browse </a>
                                <a class="button scrollto" href="getaquote.htm">Get </a>
                            </div>
                            <br><br>
                            <div class="text-center moto">
                                <h4 style="color: #FFFFFF">Use </h4>
                            </div>
                        </div>
                    </div>
                </section><!-- END BANNER SECTION -->
4

2 回答 2

0

您可能必须将元素设置为块级元素（显示：块）并将它们的边距设置为 0px。

于 2014-10-17T20:07:12.583 回答
0

没有看到 HTML，我只是猜测......您的代码看起来有点乱，但也许从一些修复开始。

我不确定为什么“margin-bottom”有两个值。尝试改变：

    #top_part{
        margin-bottom: 0 auto;

    }

至：

    #top_part{
        margin: 0px auto;
    }

重新审视这些并确保它们不与其他内容冲突或覆盖：

    @media screen and (max-width: 800px) {
        #top_part{
            margin-bottom: 150px;
        }
    }

    @media screen and (max-width: 400px) {    
        #top_part{
            margin-bottom: 100px;
        }
    }

您也可以尝试添加

    padding: 0px;

只是为了排除这一点。

于 2014-10-17T20:19:37.883 回答