如何让“margin：auto”和“margin-left：offset”一起工作？

I have a container on my test site:

我的测试网站上有一个容器：

#container {
  margin: 0 auto;
}

Then I added the left vertical menu and on some small screens that menu is not fully visible.
Like my old laptop :-)

然后我添加了左侧垂直菜单，并在一些小屏幕上显示菜单不完全可见。像我的旧笔记本电脑:-)

I want to keep the margin:auto setting in place but I want to move the whole #container a little bit to the right.

我想保留边距：自动设置到位，但我想将整个#container向右移动一点。

Could it be done some how?

I have tried #container {margin-left:10px;}, but to no avail.

我试过#container {margin-left：10px;}，但无济于事。

3 个解决方案

#1

Playing with firebug, it's good to use:

玩萤火虫，使用起来很好：

#container {
 margin: 0 auto;
 position:relative;
 left:10px;
}

Hope it solves...

希望它能解决......

#2

The simplest approach would be to introduce another element (or style another element if it's already available). Thus, you might have:

最简单的方法是引入另一个元素（如果已经可用，则引入另一个元素）。因此，你可能有：

<div style="margin-left: 10px;">
   <div id="container" style="margin: auto;">...</div>
</div>

That way the centering is being done within a container div that's already got the appropriate left-hand padding.

这样，中心就在容器div中完成，而容器div已经有了适当的左手填充。

#3

If you wrap your #container div in another div with double the left margin, that will work.

如果你将#container div包装在左边距加倍的另一个div中，那就行了。

  #wrap {
    margin-left: 20px;
  }
  .centre { /* this would be your #container */
    width: 100px;
    height: 40px;
    margin: auto;
    background-color: #f00;
  }
  #wrap .centre {
    background-color: #00f;
  }

The HTML:

HTML：

  <div class="centre"></div>
  <div id="wrap">
    <div class="centre"></div>
  </div>

http://jsbin.com/emogu3

#1