Question

我的标题是什么？为什么我的代码位于标题内部而不是真的？位于<header>内的代码的一部分真的不在<header>中，我如何才能解决这个问题？我找不到错误！我谈到这个部分：

      <div id="logo">
        <img class="logo" src="logo.png" alt="logo">
      </div>
      <div id="menu1">
        <ul>
          <li class="first"><a href="#">Условия</a></li>
          <li class="second"><a href="#">Поддержка</a></li>
          <li class="third"><a href="" #>Форум</a></li>
        </ul>
      </div>
      <div id="support">
        <img src="icq.png" alt="icq" class="icq">
        <span class="icqnumber">361855340</span>
        <div id="supporttitle">
          <span class="support-worktime">Служба поддержки 24/7</span>
        </div>
      </div>

我做错了什么？

@charset "utf-8" * {
  margin: 0px;
  padding: 0px;
}

body {
  width: 98%;
  height: 100%;
  background: #fff;
  margin-left: 1%;
  margin-right: 1%;
  font-size: 1em;
  font-family: "FF Meta Serif" Serif;
  line-height: 120%;
}

footer,
#page-wrap:after {
  content: "";
  display: block;
}

#page-wrap {
  min-height: 95%;
  margin-bottom: -40px;
  position: relative;
}

header {
  margin-top: 1%;
  width: 100%;
  height: auto;
  border: 1px solid black;
}

#logo {
  float: left;
  border: 1px solid black;
}

img.logo {
  width: 100%;
  height: auto;
}


}
img.icq {
  max-width: 100%;
  height: auto;
}
#menu1 {
  float: left;
  margin-left: 10%;
  width: 50%;
}
li {
  display: inline;
  list-style-type: none;
}
li.first {
  padding-left: 5%;
}
li.second {
  padding-left: 25%;
}
li.third {
  padding-left: 25%;
}
#support {
  float: left;
  width: 15%;
  line-height: 120%;
  margin-left: 10%;
}
span.icqnumber {
  font-family: 'Times New Roman', Times, serif;
  font-size: 1.6em;
  color: #009a00;
  font-weight: bolder;
  line-height: 0%;
}
#supporttitle {
  width: 80%;
  float: right;
  margin-right: 10%;
}
span.support-worktime {
  font-family: 'Times New Roman', Times, serif;
  color: #999999;
  font-size: 1em;
  font-weight: 250;
}
#sidebar-left {
  float: left;
  margin-top: 5%;
  width: 17%;
  border: 1px solid black;
  height: 70%;
  position: fixed;
}
#leftsideslogan {
  float: left;
  width: 100%;
  margin-left: ;
  border: 1px solid black;
}
p.slogan1 {
  font-family: 'Times New Roman', Times, serif;
  font-size: 2em;
  line-height: 5%;
}
p.slogan2 {
  font-family: 'Times New Roman', Times, serif;
  font-size: 2em;
  line-height: 5%;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <title>PROFIT-CENTER.RU</title>
  <link rel="stylesheet" href="stylesheet.css">
</head>

<body>
  <div id="page-wrap">
    <header>
      header
      <br>header
      <br>header
      <br>header
      <div id="logo">
        <img class="logo" src="logo.png" alt="logo">
      </div>
      <div id="menu1">
        <ul>
          <li class="first"><a href="#">Условия</a></li>
          <li class="second"><a href="#">Поддержка</a></li>
          <li class="third"><a href="" #>Форум</a></li>
        </ul>
      </div>
      <div id="support">
        <img src="icq.png" alt="icq" class="icq">
        <span class="icqnumber">361855340</span>
        <div id="supporttitle">
          <span class="support-worktime">Служба поддержки 24/7</span>
        </div>
      </div>

    </header>
    <div id="sidebar-left">
      <div id="leftsideslogan">
        <p class="slogan1">Заработай на своих</p>
        <p class="slogan2">сайтах больше!</p>
      </div>
    </div>



  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="script.js"></script>
</body>

</html>

Answer 1

元素不会留在header内，因为它们具有float属性，而且它们是header中的最后一个元素。

解决方案 - 添加一个浮动清除元素，如下所示：

<header>
     // your code....

     <div class="clear-both"></div>
</header>

用这个css：

.clear-both {
    clear: both;
}

我的标题有什么用？

1 个答案: