Question

我正在建立一个网站，但我对CSS相对较新，我对元素的定位存在问题。我想要一个标题，其中将有一个菜单，其中包含网站不同部分的选项，内容部分将有内容和页脚，社交媒体上有链接。我已经用菜单制作了标题部分，但内容与它重叠，更确切地说，它在菜单栏下。如果你能帮助我，我将非常感激。

CSS：

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    margin: 0;
    padding: 0;
    font-weight: 100;
    font-family: 'Lato';
}
a {
    text-decoration: none !important;
    color: white;
}
.container {
    width: 100%;
}
.content {
    text-align: center;
    font-size: 96px;
}

.footer-social {
    float: right;
    margin-bottom: 5px;
}
.footer-social ul {
    float: right;
    padding: 0;
    margin: 0;
}
.footer-social li {
    float: right;
    list-style: none;
    margin-left: 5px;
}

HTML：

<body>
    <div class="container">
        <div class="menu">
            <ul>
                <li>
                    <a href="#Home">Home</a>
                </li>
                <li>
                    <a href="#Photos">Photos</a>
                </li>
                <li>
                    <a href="#Events">Events</a>
                </li>
                <li>
                    <a href="#Contact">Contact</a>
                </li>
            </ul>
        </div>

        <div class="content">
            Text
        </div>

        <div class="footer-social">
             <a href="http://www.facebook.com">
                 <img src='http://www.womenactionmedia.org/cms/assets/themes/crate/images/social/facebook.png' />
             </a>
        </div>
    </div>
</body>

Answer 1

尝试下面的代码，它可以帮助你

＆＃13;

html, body {
            height: 100%;
            margin: 0;
            padding: 0;
  background : #ddd;
        }

        body {
            margin: 0;
            padding: 0;
            font-weight: 100;
            font-family: 'Lato';
        }

        a {
            text-decoration: none !important;
            color: white;
        }
        .menu{
        background : black;
        }
        .menu ul li{
         display : inline-block;
         padding : 8px;
        }
        
        .menu ul li:hover, a:hover{
         background : white;
         color : black;
        }
        .container {
            width: 100%;
        }

        .content {
            text-align: center;
            font-size: 96px;
        }

        .footer-social {
            float: right;
            margin-bottom: 5px;
        }
        .footer-social ul {
            float: right;
            padding: 0;
            margin: 0;
        }
        .footer-social li {
            float: right;
            list-style: none;
            margin-left: 5px;
        }

＆＃13;

<div class="container">

  <div class="menu">
    <ul>
      <li>
        <a href="#Home">Home</a>
      </li>
      <li>
        <a href="#Photos">Photos</a>
      </li>
      <li>
        <a href="#Events">Events</a>
      </li>
      <li>
        <a href="#Contact">Contact</a>
      </li>
    </ul>
  </div>

  <div class="content">
    Text
  </div>

  <div class="footer-social">
    <a href="http://www.facebook.com">
      <img src='http://www.womenactionmedia.org/cms/assets/themes/crate/images/social/facebook.png' />
    </a>
  </div>

</div>

＆＃13;

CSS元素重叠，但我想要一个在另一个下面

1 个答案: