HTML/CSS：页面左侧的导航栏

Question

HTML/CSS：页面左侧的导航栏

htmlcsslayout

4

我发现创建像这样具有良好语义的布局有些尴尬。

左侧是一个宽约150像素的列，其中包含导航元素。

我想将该站点部分的HTML放在HTML代码的开头，然后有一种简单的方法来强制页面的其余部分不要侵占左侧（150像素列）的领土。

我考虑了一些选项。

1. 将站点其余内容放在显式具有150px左边距的div中。 2. 将nav元素设置为宽度为150px并向左浮动。其余页面自然换行。

还有其他更适合此任务的选项吗？

以下是缺点。

1. 将nav元素更改为200px现在需要我编辑其他div的左边距为200px。当然，对于一次性布局更改来说，这并不太糟糕，但是如果我从脚本动态更改了nav元素的宽度怎么办？我需要让脚本也更改div的边距。 2. 如果将nav元素设置为position：fixed（并使其占据页面的整个左列），则页面的其余部分不会适应其现在的静止行为，并且在滚动页面时看起来很糟糕。要解决此问题，我需要使nav元素无限高。我不确定如何正确地做到这一点。 height：9999999px;？这使我的页面高达1000万像素，滚动条现在无用了。

- Steven Lu

3个回答

1

我一直使用选项1，不过如果还有其他想法的话，我很乐意听听。

- sevenseacat

1

关于您的“缺点”的一些建议：

如果您厌倦了一直更改两个具有相同值的属性，请考虑使用CSS生成工具，如LCSS、SASS。
如果我没记错的话，与其为左侧边栏设置height: 999999px，还有一些诸如此类的技巧存在：http://www.ejeliot.com/blog/61

- timdream

链接失效。请更新链接，或者最好在您的回答中解释“技巧”。谢谢。 - Michael Scheper

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- stephenmurdoch · Accepted Answer

创建侧边栏：

<!-- html -->
<nav role="main">
  <a href="link.com">link</a>
</nav>

//css
nav{    
  width: 150px;
  float: left;
  display: inline;
  margin: 0;
  padding: 0;
  margin-right: 10px;
}

然后创建一个容器来装载你的主要内容。

<!-- html -->
<section id="main">
  main content in here
</section>

//css
section#main{
  width: 500;
  float: left;
  margin: 0;
  padding: 0;
  display: inline;     
}

只要在源代码中将nav放在section之前，那么section中的任何内容都会远离左侧列，并且不会在其下方换行。

只需确保重置所有CSS，特别是填充、边距和边框，除非您知道自己在做什么。

祝你好运。