Question

我正在尝试使菜单具有“带状”效果，如果它应该“包裹”在容器上。

问题是如果我尝试左右边距为-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;。 Fiddle

或者，将菜单放在容器外面。 Fiddle

Answer 2

边距左右边距怎么样？

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

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

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

中

保证金左右-10px在一个容器中

2 个答案: