基本的网站布局和导航

Question

我被要求为我正在帮助的当地美术馆的一个小项目制作一个简单的网页。 问题是我的 HTML 知识已经过时了。我开始使用表格来制作它，但事实证明它比我想象的要难。

Here's a basic design mockup.

• 蓝色是标题，宽度为 100%。
• 绿色是网站的主体，它具有固定的宽度（例如 800 像素）并位于屏幕底部。
• 黄色是附在主体底部的页脚。
• Red 是导航块，它是我的主要问题。它们是固定宽度（比如 180 像素），其中的文本左对齐。它们彼此等距排列，最左边和最右边的部分与主体的末端对齐，但随着屏幕宽度的缩小，它们会靠得更近。

经过一番谷歌搜索后，我设法使用 spans 和“text-align:center”制作了等间距的导航块，但这也使导航块内的文本对齐到中心。

为了使它们与主体的末端对齐，我打算使用某种具有固定宽度 (180 + 800 + 180) 的容器，但每当我尝试它时，它都会阻止跨度对齐。

所以我的问题是：我该如何处理这个导航块？

Answer 1

据我了解您的问题，这是一个小的 codepen 链接。希望对您有所帮助。

Codepen Link

HTML：

<header>
  <nav>
      <a href="#">Link 1</a> 
      <a href="#">Link 2</a> 
      <a href="#">Link 3</a> 
      <a href="#">Link4</a>
  </nav>
</header>
<div class="wrapper">
<div class="content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus aperiam, debitis labore ratione doloribus adipisci quia repellat voluptatem tempora laborum vel possimus dolorum numquam, esse, dignissimos qui iste, assumenda laudantium. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat recusandae provident similique nemo, hic delectus dolorem totam, minima maiores quas, distinctio dolorum. Numquam aperiam, rem consectetur tempora, tempore dignissimos. Recusandae.  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam voluptatum recusandae dolorem necessitatibus, vel nihil possimus voluptate obcaecati dignissimos, magni repellat, iusto atque, provident? Veniam error quaerat iusto, et explicabo?
  </div>

  <footer>
     footer
  </footer>
</div>

CSS：

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
header{
  background:blue;
  padding:10px 0;
   border-bottom:2px solid #000;
}
nav {
  width: 80%;
  margin:0 auto;
}
nav a{
  color:#fff;
  width:20%;
  text-align:center;
  display: inline-block;
}
.wrapper{
  width:800px;
  margin:0 auto;
  background-color:green;
  color:#fff;
}
.content{
    padding:20px ;
}
footer{
  background:yellow;
  padding:20px;
  color:#000;
}