容器中的左右边距-10px答案

【问题标题】：Margin left and right -10px in a container容器中的左右边距-10px
【发布时间】：2013-09-11 07:25:14
【问题描述】：

如果它应该“包裹”在容器上，我正在尝试制作一个具有“丝带状”3d 效果的菜单。

问题是，如果我尝试 margin-left 和 right 为 -10px 并不重要，它只是将 div 向左推 20px。（至少在铬）。左：-10px；并且正确：-10px 也不起作用。可能缺少什么？

http://jsfiddle.net/lasseedsvik/UhwYg/1/

HTML

<div id="container">
    <div id="top-menu">
        <ul></ul>
    </div>
</div>

CSS

#container {
    background: blue;
    height: 300px;
    width: 200px;
    margin: 0 auto;
}

#top-menu {
    clear: both;
    background: red;
    width: 200px;  /* +20px? */
    height: 20px;
    position: relative;
    /*
    margin-left: -10px;
    margin-right: -10px;
    */
}

#top-menu::before, #top-menu::after {
    content:' ';
    position: absolute;
    bottom: -10px;
}

#top-menu:before {
    border-top: 10px solid red;
    margin-left: -10px;
    border-left: 10px solid transparent;
    left: 0;
}

#top-menu:after {
    border-top: 10px solid red;
    margin-right: -10px;
    border-right: 10px solid transparent;
    right: 0;
}

【问题讨论】：

标签： css

【解决方案1】：

左右边框有边距怎么样？

http://jsfiddle.net/parslook/UhwYg/2/

border-left: 10px solid red;
border-right: 10px solid red;
margin-left:-10px;

将其添加到 #top-menu 样式中

【讨论】：

【解决方案2】：

如果您希望元素超出容器宽度，则需要使用position: absolute;。 Fiddle

或者，将您的菜单放在容器之外。 Fiddle

【讨论】：