html - 单词从导航栏被边缘化以及如何扩展导航栏

Question

所以我正在为我的一个 friend 制作一个网站，我必须将图像和导航栏定位为“相对”，这样我才能正确定位它们。但是现在当我添加段落标签时，单词和导航栏有很大的余量

此外，我如何扩展我的导航栏以使其跨越整个页面？

代码:http://jsbin.com/puzihahaxu/edit?html,output

(可以在jsbin中看到问题)

感谢您的帮助!-安东尼·德马蒂斯

Answer 1

代码有很多杂乱，正如我评论中提到的:过多的填充导致奇怪的定位，请记住，在设计网站时必须考虑各种屏幕分辨率，否则它在屏幕上看起来会很好并且在其他计算机上很奇怪，你会想知道为什么......所以我建议返回几步并了解每个元素的默认和基本样式以及 HTML 框模型的工作方式。看看我的简化示例，希望您能从中学习:

https://jsfiddle.net/azizn/oo8sk8uw/

/* main */

html,
body {
  padding: 0;
  margin: 0;
  background: darkseagreen;
  font-family: monospace;
}

#page {
  width: 75%;
  padding: 40px;
  margin: 40px auto;
  background: #FFF;
}


/* header */

#header {
  width: 100%;
  height: auto;
}

h1 {
  color: firebrick;
  padding: 0;
  margin: 20px 0;
}

/* menu */

#nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display:block;
  background-color: lightgray;
  text-align: center;
}

#nav ul li {
  display: inline-block;
  padding:15px;
  font-size: 15pt;
  margin:0;
}

ul li a {
  text-decoration: none;
  width: 100%;
}

ul li a:link {
  color: green;
}

ul li a:visited {
  background-color: mediumpurple;
}

ul li a:hover {
  background-color: cornflowerblue;
}

ul li a:active {
  background-color: grey;
}

#word {
  margin-top:20px;
  position: relative;
}

<div id="page">
  <img src="header.jpg" alt="Real Estate Lawyer" id="header">
  <h1> John De Matteis </h1>
  <div id="nav">
    <ul>
      <li><a href="john.html"> Home </a> </li>
      <li><a href="home.html"> About </a> </li>
      <li><a href="contact.html"> Contact Us </a> </li>
    </ul>
  </div>
  <div id="word">
    <p> This is some sample text egin by considering two key questions that ultimately summarize the return on your efforts: How much impact will addressing that issue have? Consider your essential question and your targeted objective. How far will addressing
      this issue get you towards your goal? How easy will it be to design and implement a solution? Consider the complexity of the issue, the amount of time and resources required, and risks to success. Ask these questions for each issue, tagging the
      issue with a designation of High-, Medium-, or Low-Impact, and High-, Medium-, or Low-Ease. To show how the different issues compare we will plot them on a 2x2 matrix, like the one shown below. One axis will correspond to Ease of Execution; the
      other axis will correspond to Potential Impact. Plot out your solutions on the matrix, and focus on those faegin by considering two key questions that ultimately summarize the return on your efforts: How much impact will addressing that issue have?
      Consider your essential question and your targeted objective. How far will addressing this issue get you towards your goal? How easy will it be to design and implement a solution? Consider the complexity of the issue, the amount of time and resources
      required, and risks to success. Ask these questions for each issue, tagging the issue with a designation of High-, Medium-, or Low-Impact, and High-, Medium-, or Low-Ease. To show how the different issues compare we will plot them on a 2x2 matrix,
      like the one shown below. One axis will correspond to Ease of Execution; the other axis will correspond to Potential Impact. Plot out your solutions on the matrix, and focus on those faegin by considering two key questions that ultimately summarize
      the return on your efforts: How much impact will addressing that issue have? Consider your essential question and your targeted objective. How far will addressing this issue get you towards your goal? How easy will it be to design and implement
      a solution? Consider the complexity of the issue, the amount of time and resources required, and risks to success. Ask these questions for each issue, tagging the issue with a designation of High-, Medium-, or Low-Impact, and High-, Medium-, or
      Low-Ease. To show how the different issues compare we will plot them on a 2x2 matrix, like the one shown below. One axis will correspond to Ease of Execution; the other axis will correspond to Potential Impact. Plot out your solutions on the matrix,
      and focus on those fa </p>
  </div>
</div>