如何删除横幅和页面顶部之间的空白

时间：2015-02-03 19:56:51

标签： css

HTML 

<html>
    <head>
        <link rel="shortcut icon" href=".\favicon.ico">
        <title>rentPRO</title>

    </head>
    <body>
        <nav id="top_menu">
            <ul>
                <li class="current"><a href="#">Home</a></li>
                <li><a href="#">My Profile</a></li>
                <li><a href="#">The Fleet</a>
                    <ul>
                        <li><a href="#">Nissan</a></li>
                        <li><a href="#">Toyota</a></li>
                        <li><a href="#">Honda</a></li>
                        <li><a href="#">Mazda</a></li>
                    </ul>
                </li>
                <li><a href="#">Other Services</a></li>
                <li><a href="#">Terms and Conditions</a></li>
                <li><a href="#">Frequently Asked Questions</a></li>
                <li><a href="#">About Us</a></li>
            </ul>
        </nav>
        <div id="wrapper">
            <div id="header">
            </div>
            <div class="content">
            </div>
            <div id="footer">© rentPRO 2015</div>
        </div>
    </body>
</html>

CSS 

#header {
    background-image: url("https://lh4.googleusercontent.com/-bBxOrYzmzQE/VM57QXCUoEI/AAAAAAAAAGg/WSUG7fe2ekE/w1024-h190-no/port-louis-capital-city-picture-courtesy-mauritius-tourism-promotion-authority_gallery_small.jpg");
    background-size: 100% 100%;
    width: 1050px;
    height: 190px;
    margin: 0 auto; 
}

#top_menu {
    display:block;
    position:relative;
    top: 200px;
    border-radius: 5px;
    border-width: 1px 1px 1px;
    border-style:solid;
    background-color: #e5e5e5;
    font: bold 16px Tahoma;
    height: 40px;
    width: 1075px;
    margin: 0 auto;
    border-color: black;
}

height: 40px;使横幅下降40px，从而在页面顶部和横幅之间留下空白。当我删除此行时，问题消失但导航栏不再有背景。谁能告诉我这里有什么问题？

4 个答案:

答案 0 :(得分：1)

如果您能够更改HTML中元素的顺序，最简单的解决方案是在#top_menu和#header之间插入#content。这种结构更准确地反映了您想要显示的结构，并且元素将自然流动。您可以从height删除top和#top_menu。

<div id="wrapper">
    <div id="header"></div>
    <nav id="top_menu"> ... </nav>
    <div class="content"></div>
    <div id="footer">© rentPRO 2015</div>
</div>

以下示例：

＆＃13;
＆＃13; 
html,
body {
  margin: 0;
}
#header {
  background-image: url("https://lh4.googleusercontent.com/-bBxOrYzmzQE/VM57QXCUoEI/AAAAAAAAAGg/WSUG7fe2ekE/w1024-h190-no/port-louis-capital-city-picture-courtesy-mauritius-tourism-promotion-authority_gallery_small.jpg");
  background-size: 100% 100%;
  width: 1050px;
  height: 190px;
  margin: 0 auto;
}
#top_menu {
  display: block;
  position: relative;
  border-radius: 5px;
  border-width: 1px 1px 1px;
  border-style: solid;
  background-color: #e5e5e5;
  font: bold 16px Tahoma;
  width: 1075px;
  margin: 0 auto;
  border-color: black;
}
＆＃13; 
<div id="wrapper">
  <div id="header"></div>
  <nav id="top_menu">
    <ul>
      <li class="current"><a href="#">Home</a></li>
      <li><a href="#">My Profile</a></li>
      <li><a href="#">The Fleet</a>
        <ul>
          <li><a href="#">Nissan</a></li>
          <li><a href="#">Toyota</a></li>
          <li><a href="#">Honda</a></li>
          <li><a href="#">Mazda</a></li>
        </ul>
      </li>
      <li><a href="#">Other Services</a></li>
      <li><a href="#">Terms and Conditions</a></li>
      <li><a href="#">Frequently Asked Questions</a></li>
      <li><a href="#">About Us</a></li>
    </ul>
  </nav>
  <div class="content"></div>
  <div id="footer">© rentPRO 2015</div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

首先，您必须将<nav>标记放在带有ID标头的div内。 在#top_menu中设置top: 190px;。

HTML： 

    <head>
        <link rel="shortcut icon" href=".\favicon.ico">
        <title>rentPRO</title>

    </head>
    <body>
        <div id="wrapper">
            <div id="header">
                <nav id="top_menu">
            <ul>
                <li class="current"><a href="#">Home</a></li>
                <li><a href="#">My Profile</a></li>
                <li><a href="#">The Fleet</a>
                    <ul>
                        <li><a href="#">Nissan</a></li>
                        <li><a href="#">Toyota</a></li>
                        <li><a href="#">Honda</a></li>
                        <li><a href="#">Mazda</a></li>
                    </ul>
                </li>
                <li><a href="#">Other Services</a></li>
                <li><a href="#">Terms and Conditions</a></li>
                <li><a href="#">Frequently Asked Questions</a></li>
                <li><a href="#">About Us</a></li>
            </ul>
        </nav>
            </div>
            <div class="content">
            </div>
            <div id="footer">© rentPRO 2015</div>
        </div>
    </body>
</html>

<强> CSS： 

#header {
    background-image: url("https://lh4.googleusercontent.com/-bBxOrYzmzQE/VM57QXCUoEI/AAAAAAAAAGg/WSUG7fe2ekE/w1024-h190-no/port-louis-capital-city-picture-courtesy-mauritius-tourism-promotion-authority_gallery_small.jpg");
    background-size: 100% 100%;
    width: 1050px;
    height: 190px;
    margin: 0 auto; 
}

#top_menu {
    display:block;
    position:relative;
    top: 190px;
    border-radius: 5px;
    border-width: 1px 1px 1px;
    border-style:solid;
    background-color: #e5e5e5;
    font: bold 16px Tahoma;
    height: 40px;
    width: 1075px;
    margin: 0 auto;
    border-color: black;
}

检查fiddle

答案 2 :(得分：0)

尝试此代码，我将标题标记移到菜单上方，取消高度并将顶部菜单高度更改为20. 

 </head>
    <body>
    <div id="header"></div>

        <nav id="top_menu">
            <ul>
                <li class="current"><a href="#">Home</a></li>
                <li><a href="#">My Profile</a></li>
                <li><a href="#">The Fleet</a>
                    <ul>
                        <li><a href="#">Nissan</a></li>
                        <li><a href="#">Toyota</a></li>
                        <li><a href="#">Honda</a></li>
                        <li><a href="#">Mazda</a></li>
                    </ul>
                </li>
                <li><a href="#">Other Services</a></li>
                <li><a href="#">Terms and Conditions</a></li>
                <li><a href="#">Frequently Asked Questions</a></li>
                <li><a href="#">About Us</a></li>
            </ul>
        </nav>
        <div id="wrapper">

            <div class="content">
            </div>
            <div id="footer">© rentPRO 2015</div>
        </div>
    </body>
</html>

#header {
    background-image: url("https://lh4.googleusercontent.com/-bBxOrYzmzQE/VM57QXCUoEI/AAAAAAAAAGg/WSUG7fe2ekE/w1024-h190-no/port-louis-capital-city-picture-courtesy-mauritius-tourism-promotion-authority_gallery_small.jpg");
    background-size: 100% 100%;
    width: 1050px;
    height: 190px;
    margin: 0 auto; 
}

#top_menu {
    display:block;
    position:relative;
    top: 20px;
    border-radius: 5px;
    border-width: 1px 1px 1px;
    border-style:solid;
    background-color: #e5e5e5;
    font: bold 16px Tahoma;

    width: 1075px;
    margin: 0 auto;
    border-color: black;
}

答案 3 :(得分：0)

这会对你有所帮助：

html, body {margin: 0; padding: 0}
#banner {
    background-image: url("https://lh4.googleusercontent.com/-bBxOrYzmzQE/VM57QXCUoEI/AAAAAAAAAGg/WSUG7fe2ekE/w1024-h190-no/port-louis-capital-city-picture-courtesy-mauritius-tourism-promotion-authority_gallery_small.jpg");
    background-size: 100% 100%;
    width: 1050px;
    height: 190px;
    margin: 0 auto; 
}
#top_menu {
    display:block;
    position:relative;
    /*top: 200px;*/
    border-radius: 5px;
    border-width: 1px 1px 1px;
    border-style:solid;
    background-color: #e5e5e5;
    font: bold 16px Tahoma;
    height: 40px;
    width: 1075px;
    margin: 0 auto;
    border-color: black;
}

HTML：

<header>
    <div id="banner">
    </div>
    <nav id="top_menu">
        <ul>
            <li class="current"><a href="#">Home</a></li>
            <li><a href="#">My Profile</a></li>
            <li><a href="#">The Fleet</a>
                <ul>
                    <li><a href="#">Nissan</a></li>
                    <li><a href="#">Toyota</a></li>
                    <li><a href="#">Honda</a></li>
                    <li><a href="#">Mazda</a></li>
                </ul>
            </li>
            <li><a href="#">Other Services</a></li>
            <li><a href="#">Terms and Conditions</a></li>
            <li><a href="#">Frequently Asked Questions</a></li>
            <li><a href="#">About Us</a></li>
        </ul>
    </nav>
  </header>
  <div id="wrapper">
      <div class="content">
      </div>
  </div>
  <footer>
      <div id="footer">© rentPRO 2015</div>
  </footer>
相关问题
最新问题