Question

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

Here's a basic design mockup.

蓝色是标题，宽度为100％。
绿色是网站的主体，它有固定的宽度（比如800px）并且会显示在屏幕的底部。
黄色是贴在主体底部的页脚。
红色是navblocks，也是我的主要问题。它们是固定宽度（例如180px），其中的文本在左边对齐。它们彼此之间的间距相等，最左边和最右边的那些与主体的末端对齐，但在缩小屏幕宽度时靠近它们。

经过一些谷歌搜索后，我设法使用跨度和“text-align：center”制作等间距的导航块，但这也使得navblocks中的文本对齐到中心。

为了使它们与主体的末端对齐，我打算使用某种具有固定宽度（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;
}

基本站点布局和导航

1 个答案: