无法正确居中 div.边距: 0 自动;不工作

我想要一个固定的全高侧边栏，主要内容居中位于该侧边栏右侧的剩余空间中。

我很接近，但是使用边距时，主要内容在包装器div 中没有正确居中：0 自动;。#content 的左边距明显大于左边距。

请帮助我将主要内容div 居中包装div。

在这里看JS小提琴

谢谢！

.HTML

<body > 
    <div id="sidebar">
      <ul>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
      </ul>
      <p> this is the sidebar, it's ok as it is</p>
    </div>
    <div id="wrapper">
        <div id="content"> 
            <ul>
            This div needs to be cetnered in the #wrapper with auto margins.
            </ul>
       </div>
    </div>
</body>

.CSS

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: black;
}
body {
  padding: 0;
  margin: 0;
}
#wrapper {
  margin-left: 250px;
  height: 100%;
  width: 100%;
}
#content {
  width: 900px;
  height: 100%;
  background-color: blue;
  margin: 0 auto;
}
#sidebar {
  width: 250px;
  height: 100%;
  float: left;
}

修复很简单。我将 #wrapper 宽度：100%更改为最大宽度：100%。

在此处查看固定小提琴

更新的 CSS

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: black;
}
body {
  padding: 0;
  margin: 0;
}
#wrapper {
  margin-left: 250px;
  height: 100%;
  **max-width: 100%;**
}
#content {
  width: 900px;
  height: 100%;
  background-color: blue;
  margin: 0 auto;
}
#sidebar {
  width: 250px;
  height: 100%;
  float: left;
}

相关内容

最新更新

热门标签：