HTML/CSS：页面左侧的导航栏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4721590/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML/CSS: Nav bars on the left side of page
提问by Steven Lu
I find it awkward to create layouts like this that have good semantics.
我发现创建这样的具有良好语义的布局很尴尬。
The left side is a column about 150 pixels wide which contains navigation elements.
左侧是一个大约 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).
我想把网站这部分的 HTML 放在 HTML 代码的开头，然后有一个简单的方法来强制页面的其余部分不要侵占左侧的区域（150 像素列）。
I have thought about some options.
我已经考虑了一些选择。
- Place rest of site content inside a div which explicitly has a left-margin of 150px.
- Set the nav element to width 150px and float left. The rest of the page naturally wraps.
- 将网站的其余内容放在一个 div 中，该 div 的左边距明确为 150 像素。
- 将导航元素设置为宽度 150px 并向左浮动。页面的其余部分自然换行。
Are there other options that are more suitable for this task?
还有其他更适合此任务的选项吗？
Here are the cons.
这是缺点。
- 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.
- 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.
- 将 nav 元素更改为 200px 现在需要我将另一个 div 的左边距编辑为 200px。当然，这对于一次性布局更改来说还不错，但是如果我让导航元素的宽度从脚本动态更改怎么办？我还需要脚本来更改 div 的边距。
- 如果将导航元素设置为 position:fixed（并使其占据页面的整个左列），则页面的其余部分不会适应其现在静止的行为，并且在滚动页面时看起来很糟糕。为了解决这个问题，我需要使导航元素无限高。我不确定如何以正确的方式做到这一点。
height:9999999px;? 这使我的页面有 1000 万像素高，滚动条现在没用了。
回答by stephenmurdoch
Create sidebar:
创建侧边栏：
<!-- 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;
}
As long as you place navbefore sectionin your source code, anything that is in the sectionwill stay away from the left hand column and will not wrap under it.
只要您将nav放在源代码中的部分之前，该部分中的任何内容都将远离左侧列并且不会在其下方换行。
Just need to make sure you reset all your css, especially paddings, margins and borders unless you know what you're doing
只需要确保重置所有 css，尤其是内边距、边距和边框，除非您知道自己在做什么
good luck
祝你好运
回答by sevenseacat
I have always used option 1, though if there are other ideas out there, I'd love to hear about them.
我一直使用选项 1，但如果还有其他想法，我很想听听。
回答by timdream
Few suggestions for your 'cons':
针对您的“缺点”的一些建议：
- If you are tired of changing two properties with the same value all the time, consider using CSS generation tools like LCSS, SASS.
- If I remember correctly, instead of setting
height: 999999pxfor the left sidebar, some tricks like this one do exists: http://www.ejeliot.com/blog/61
- 如果您厌倦了一直更改具有相同值的两个属性，请考虑使用 LCSS、SASS 等 CSS 生成工具。
- 如果我没记错的话，不是设置
height: 999999px左侧边栏，而是存在一些像这样的技巧：http: //www.ejeliot.com/blog/61
