HTML / CSS：页面左侧的导航栏 [英] HTML/CSS: Nav bars on the left side of page

问题描述

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

I find it awkward to create layouts like this that have good semantics.

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

The left side is a column about 150 pixels wide which contains navigation elements.

我想将网站的这一部分的HTML放在HTML代码的开头
，然后有一个简单的方法强制其余的页面不会侵占左侧的该区域（150像素列）。

I would like to put the HTML for this section of the site at the beginning of the HTML code, and then have an easy way to force the rest of the page not to encroach on that territory on the left (the 150 pixel column).

我已经考虑过一些选项。

I have thought about some options.

1. 将其余网站内容放置在div中，左侧边距为150像素。


2. 将nav元素设置为width 150px，向左浮动。页面的其余部分自然包装。

是否有其他选项更适合此任务？

Are there other options that are more suitable for this task?

这里是缺点。

1. 将nav元素更改为200px现在需要将其他div的左边距编辑为200像素。当然，这不是太糟糕了一次性的布局更改，但如果我有nav元素的宽度动态改变从脚本？我需要脚本也改变div的边距。


2. 如果nav元素设置为position：fixed（并设置为占据页面的整个左列），则页面的其余部分不包含其现在的稳定行为，可怕的当页面滚动。要解决这个问题，我需要使nav元素的高度无限大。我不知道如何做到这一点正确的方法。 height：9999999px; ？这使我的页面高达1000万像素，而且滚动条现在无用了。

1. Changing the nav element to 200px now requires me to edit the left-margin of the other div to 200px. Sure, this isn't too bad for a one-time layout change, but what if I had the nav element's width dynamically change from script? I would need the script to also change the margin of the div.
2. If the nav element is set to position:fixed (and made to occupy the entire left column of the page) the rest of the page's wrapping does not accomodate its now stationary behavior and it looks terrible when the page is scrolled. To fix this I need to make the nav element infinite height. I am not sure how to do this the right way. height:9999999px;? That makes my page 10 million pixels high and the scrollbar is now useless.

推荐答案

：

<!-- 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;
}

然后为您的主要内容创建一个容器

Then create a container for your main content

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

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

只要在 nav >部分，部分中的任何内容都将远离左侧列，不会包含在其中。

As long as you place nav before section in your source code, anything that is in the section will stay away from the left hand column and will not wrap under it.

只需要确保重置所有的CSS，尤其是padding，边距和边框，除非你知道自己在做什么。

Just need to make sure you reset all your css, especially paddings, margins and borders unless you know what you're doing

good luck

good luck

这篇关于HTML / CSS：页面左侧的导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！