时间戳

首页 > 解决方案 > html中的正文在导航栏上方

html - html中的正文在导航栏上方

问题描述

当我想在我的正文中放置一些文本或在其中放置 div 或部分之类的内容时，我遇到了这个问题，文本位于标题中的导航栏上方。我试图在正文顶部放置一个边距，但它只做了顶部之间的差距更大。

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.logo {
  float: left;
  height: auto;
  width: auto;
}
body{
  background-color: #444064;
  margin-top:10ex;
}
nav {
  float: right;
  margin-bottom: 50px;
}
nav ul {
  margin: 0,auto;
  padding: 0,auto;
  list-style: none;
}
nav li {
  display: inline-block;
  margin-right: 2ex;
  padding: 5ex;
}
nav a {
  color: #ffffff;
  font-weight: 600;
  font-size: 4ex;
  text-decoration: none;
}
nav a:hover {
  color: #a34963;
}
section{
  text-align: center;
  margin-top: 5ex;
}
h1{
  font-size: xx-large;
}
<html>
<div id="wrapper">
   <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="testsite.css">     
    </head>
    <header>
            <div id="menu">
                <img src="Logo.png" alt="logo" class="logo">
            <home>                  
                <nav class="menu">                          
                    <ol>                   
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About Me</a></li>
                        <li><a href="#">Skills</a></li>
                        <li><a href="#">Contact</a></li>
                    </ol>
                </nav>
            </home>
           </div>
   </header> 
    <body>
        Hello world
    </body>
</div>  
</html>

请帮我

标签： htmlcss

解决方案

您的代码存在许多问题，因为您的 HTML 结构无效。但是您遇到的问题是：nav { float: right; }这会导致您的导航栏浮动，因此内容可以围绕导航元素流动并显示在上方。如果您删除该行，它将不再发生。

但是，我强烈建议回到一些不错的教程并从基础开始。就像我说的那样，您的 HTML 结构是无效的混乱。一些 css 声明也是不正确/不必要的（例如用于 box-sizing 的 webkit 前缀）。也不要使用浮动作为造型技术。使用现代解决方案，如 flexbox 或 css-grid。

最后但同样重要的是，这就是 html 结构的外观。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.logo {
  float: left;
  height: auto;
  width: auto;
}

body {
  background-color: #444064;
  margin-top: 10ex;
}

nav {
  margin-bottom: 50px;
}

nav ul {
  margin: 0 auto;
  padding: 0 auto;
  list-style: none;
}

nav li {
  display: inline-block;
  margin-right: 2ex;
  padding: 5ex;
}

nav a {
  color: #ffffff;
  font-weight: 600;
  font-size: 4ex;
  text-decoration: none;
}

nav a:hover {
  color: #a34963;
}

section {
  text-align: center;
  margin-top: 5ex;
}

h1 {
  font-size: xx-large;
}
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="testsite.css">
</head>

<body>

  <header>
    <div id="menu">
      <img src="Logo.png" alt="logo" class="logo">
      <home>
        <nav class="menu">
          <ol>
            <li><a href="#">Home</a></li>
            <li><a href="#">About Me</a></li>
            <li><a href="#">Skills</a></li>
            <li><a href="#">Contact</a></li>
          </ol>
        </nav>
      </home>
    </div>
  </header>

  <div id="wrapper">
    Hello world
  </div>
  
</body>

</html>

推荐阅读