css - 容器中的左右边距-10px

Question

我正在尝试制作一个具有“类似丝带”的 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;
}

Answer 1

position: absolute;如果您希望元素延伸到容器宽度之外，则需要使用。小提琴

或者，将您的菜单放在容器外。小提琴

Answer 2

带有边距的左右边框怎么样？

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

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

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