Question

我正在尝试使用css设置网页样式。由于某种原因，我的标题不会扩散到标题所在的位置，这意味着宽度不是100％。它现在看起来像this is the screenshot

header {
  width: 100%;
}
#logo_picture {
  margin-left: 80px;
}
#logo img,
#logo nav {
  float: left;
}
#logo nav {
  line-height: 120px;
  margin-left: 250px;
}
nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}
nav li {
  display: inline;
}
nav a {
  color: black;
  font-size: 20px;
  font-family: 'Arsenal', 'sans-serif';
  font-weight: 300;
  padding: 2px 38px;
  text-decoration: none;
}
nav a,
nav a:visited {
  color: black;
}
nav a.selected,
nav a:hover {
  color: grey;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Larry Rosenburg Official Website</title>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Anton|Crimson+Text:400,700,700i|Rakkas" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Cherry+Swash|Cinzel|Gentium+Basic|Muli" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Arsenal" rel="stylesheet">
</head>

<body>
  <header>
    <div id="logo">
      <img src="lincoln.jpg" width="30%" alt="Lincoln logo" id="logo_picture">
      <nav>
        <ul>
          <li> <a href="index.html"> Home </a> 
          </li>
          <li> <a href="http://www.lincolnlandservices.com/index.html"> Lincoln </a> 
          </li>
          <li> <a href="about.html"> About </a> 
          </li>
          <li> <a href="contact.html"> Contact </a> 
          </li>
        </ul>
      </nav>

    </div>
  </header>

  <h1> Larry Rosenburg </h1> 
  <p>
    I believe that as important as skills and experiences are in our professional careers, it is the relationships that we create which allow us to truly succeed. My company provides title insurance, settlement, escrow and exchange services on a level that
    is second to none, but my focus is helping your succeed with your commercial and residential transactions. As a person who can deliver a full range of solutions, I am able to leverage the power of my company with my drive to be concerned with your
    company.
  </p>

  <div id="profile-pic">
    <img src="picture.jpg" width="35%" alt="">
  </div>


</body>

<footer>
</footer>

</html>

Answer 1

每次浮动后你必须创建一个清晰的类。尝试添加CSS：

.clearfix {
  clear: both;
}

</header>添加<div class="clearfix">

后的html中的

标题后面的<p>标记中的文本正在挤入标题中。我该怎么改变？

1 个答案: