Question

如何将我的内容放在导航下方。每当我在里面放一些文字时，它就会落后于绿色背景并被导航所掩盖。请帮助我如何将我的文本放在导航下面

<html>
<style>

ul {
    list-style-type: none;
    margin: 0;
    padding: 10px;
    overflow: hidden;
    background-color: #1E9600;
	position: fixed;
    top: 0;
    width: 100%;
	height:75px;
}


li {
    float: left;
	height:75px;
	border-right: 5px solid red;
}
li:last-child {
    border-right: none;
}
li a {
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}


li a:hover:not(.active) {
    background-color: yellow;
}

.active {
    background-color: #4CAF50;
}
</style>e>


</style>
<head>
<title> E-Benta </title>

<ul>
<li><a href="Home.html"> <img src="logo.png"> </img> </a>
<li><a href ="Home.html">Home </a></li>
<li><a href ="Products.html">Products </a>
<li><a href ="about.html">About us </a>
<li><a href ="contact.html">Contact us </a>
</ul>
</head>
<spacer>testing </spacer>

</body>

</html>

Answer 1

如果您添加到此代码中：

spacer {
    display: block;
    margin-top: 75px;
}

一切都会好的。只需添加大于固定菜单高度的margin-top。

点击此处的代码段：http://codepen.io/Dzongkha/pen/PbbvLZ

Answer 2

您需要在顶部留出空间（与标题一样多）。您可以使用保证金顶部。

内联代码将是

<spacer style="margin-top:90px;float: left;">testing </spacer>

您可以为此创建类并分配给spacer。

<html>
<style>

ul {
    list-style-type: none;
    margin: 0;
    padding: 10px;
    overflow: hidden;
    background-color: #1E9600;
	position: fixed;
    top: 0;
    width: 100%;
	height:75px;
}


li {
    float: left;
	height:75px;
	border-right: 5px solid red;
}
li:last-child {
    border-right: none;
}
li a {
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}


li a:hover:not(.active) {
    background-color: yellow;
}

.active {
    background-color: #4CAF50;
}
</style>e>


</style>
<head>
<title> E-Benta </title>

<ul>
<li><a href="Home.html"> <img src="logo.png"> </img> </a>
<li><a href ="Home.html">Home </a></li>
<li><a href ="Products.html">Products </a>
<li><a href ="about.html">About us </a>
<li><a href ="contact.html">Contact us </a>
</ul>
</head>
<spacer style="margin-top:90px;float: left;">testing </spacer>

</body>

</html>

Answer 3

正如我在这里看到的，你的代码html结构不合适，应该是

`<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>

        <!-- YOUR CSS <style> or <link> tag GOES HERE -->

     </head>
     <body>

        <!-- YOUR CONTENT ELEMENT SHOULD BE HERE -->

    </body>
</html>`

body{
margin-top:60px; /* IF Navigation is fixed top you have to put margin top to body as header hight */
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0px;
    overflow: hidden;
    background-color: #333;
    position: fixed;
    top: 0;
    width: 100%;
    height: 60px;
  }
  li {
    float: left;
    border-right: 5px solid #ddd;
  }
  li:last-child {
    border-right: none;
  }
  li a {
    display: block;
    color: #fff;
    text-align: center;
    padding: 22px 15px;
    text-decoration: none;
  }
  li a:hover:not(.active) {
    background-color: #fff;
    color:#333;
  }
  .active {
    background-color: #4CAF50;
  }

/*MAIN CONTENT CSS HERE*/
.main-content-here{
  padding:15px;
}

<ul>
  <li><a href="Home.html"><img src="logo.png" /></a></li>
  <li><a href="Home.html">Home </a></li>
  <li><a href="Products.html">Products </a></li>
  <li><a href="about.html">About us </a></li>
  <li><a href="contact.html">Contact us </a></li>
</ul>
<div class="main-content-here">
  <spacer>testing</spacer>
</div>

和上次

练习做得很完美!!!! ：）

固定导航下的HTML内容

3 个答案: