Question

我有一个简单的布局，固定的左导航和居中的页面，现在问题在低分辨率固定导航正在我想要阻止的内容区域，但我无法这样做。

任何想法如何保持我的页面居中，甚至固定与div紧邻它而不重叠我的元素屏幕分辨率低

我想要的是这样的，无论它处于什么分辨率，页面都应该居中但导航应该坐在页面旁边，不应该重叠页面

enter image description here

CSS

.page_wrapper {
    min-width: 750px;
    max-width: 750px;
    margin: 20px auto;
    border: 1px solid #ff0000;
}

.content_wrapper {
  margin: auto;
  max-width: 700px;
  margin-left: 120px;
}

p,
ul {
  margin: 0;
  padding: 0;
}
p {
  margin-bottom: 20px;
}
#nav {
  left: 300px;
  list-style: none;
  position: fixed;
  top: 20px;
}
#nav li {
  margin-bottom: 2px;
}
#nav a {
  background: #ededed;
  color: #666;
  display: block;
  font-size: 11px;
  padding: 5px 10px;
  text-decoration: none;
  text-transform: uppercase;
}
#nav a:hover {
  background: #dedede;
}
#nav .current a {
  background: #666;
  color: #ededed;
}
.current {
  background: red;
}

.section {
  border-bottom: 5px solid #ccc;
  padding: 20px;
}
.section p:last-child {
  margin-bottom: 0;
}

Answer 1

据我所知，#nav上的“左”属性导致它总是从左边距始终定位300px。删除它会使左侧导航保持在左侧（而不是左侧300px）。

而不是：

#nav {
  left: 300px;
  list-style: none;
  position: fixed;
  top: 20px;
}

试

#nav {
  list-style: none;
  position: fixed;
  top: 20px;
}

有关详细信息，请参阅W3 Schools Left Property。

回应您的评论“这将使位置导航流向页面的最左侧”：

添加margin-left:20px;属性

Answer 2

这可以通过

来完成

#nav {
    padding-left:20px;  
    padding-top:30px;
  list-style: none;
  position: fixed;
  top: 20px;
}

Live Fiddle

Answer 3

我为你做了一个小例子，你需要的是一个包装div和一个向右浮动的内容div

Demo

我已经更改了一些容器div布局，基本上你可以将容器中的内容包装起来

HTML

<div class="main_container">
   <nav class="content_navigation">
      <ul id="nav">
          <li class="current"><a href="#section-1">Section 1</a></li>
          <li><a href="#section-2">Section 2</a></li>
           <li><a href="#section-3">Section 3</a></li>
           <li><a href="#section-4">Section 4</a></li>
           <li><a href="#section-5">Section 5</a></li>
       </ul>
   </nav>
   <div class="right_content">
   <div class="section" id="section-1">
      <strong>Section 1</strong>
    </div>
    <div class="section" id="section-2">
       <strong>Section 2</strong>
    </div>
    <div class="section" id="section-3">
       <strong>Section 3</strong>
    </div>
    <div class="section" id="section-4">
       <strong>Section 4</strong>
    </div>
    <div class="section" id="section-5">
        <strong>Section 5</strong>
    </div>
  </div>
</div>

CSS

html, body {
    height: 100%;
    width: 100%;
}
.main_container {
    width: 900px;
    min-width: 900px;
    margin: 0 auto;
    background: #ffffff;
}
.content_navigation {
    width: 205px;
    position: fixed;
    margin-top: 120px;
}
.right_content {
    float: right;
    width: 675px;
    border-left: 1px solid #252525;
    margin-top: 25px;
}
#nav {
  list-style: none;
}
#nav li {
  margin-bottom: 2px;
}
#nav a {
  background: #ededed;
  color: #666;
  display: block;
  font-size: 11px;
  padding: 5px 10px;
  text-decoration: none;
  text-transform: uppercase;
}
#nav a:hover {
  background: #dedede;
}
#nav .current a {
  background: #666;
  color: #ededed;
}
.current {
  background: red;
}
.section {
  border-bottom: 5px solid #ccc;
  padding: 20px;
}
.section p:last-child {
  margin-bottom: 0;
}

Answer 4

使用left: 50%使用left-margin为#nav来定位中间的#nav { left: 50%; margin-left:-350px; ... }

jsfiddle

{{1}}

Answer 5

我尝试制作类似于图表中的内容，使#nav绝对定位于.left_navigation。同时删除.content_wrapper上的边距，因为它似乎没有用处。

.content_wrapper {
  /*margin-left: 120px;*/
}
#nav {
  left:-77px;
  width:76px;
  list-style: none;
  position: absolute;
  top: -1px;
}
.left_navigation{
    position:relative;
}

DEMO

固定左导航问题

5 个答案:

Live Fiddle