CSS在div之外对齐

Question

我有一个代码of navigation，其中导航器在div内部左对齐

但是如何对齐到相同的位置，但在这个div之外，所以圆角必须在左边（现在它们在右边）才能得到这样的东西

我无法移除filter，因为我有滑块，如果我删除它，所有幻灯片都会脱离div

Answer 1

删除overflow:hidden表格外部div，并为按钮添加left:-48px;。

[<强>小提琴] [1]

https://jsfiddle.net/6m8vw5jy/

Answer 2

Swaranan说的话。并从右到左改变半径：

https://jsfiddle.net/6m8vw5jy/1/

border-bottom-left-radius: 10px;
border-top-left-radius: 10px;

Answer 3

您必须删除overflow：hidden，它会阻止您在父级div之外显示导航。

Answer 4

我从div first1中取出导航ID并向左移动48px，并更改了css for rounds：

border-bottom-left-radius：10px; border-top-left-radius：10px;

var maximums = input.Split(new [] {'|'}, StringSplitOptions.RemoveEmptyEntries)
    .Aggregate((IEnumerable<int>)null,(m,r) => 
    {
        var cells = r.Split(new [] {' '}, StringSplitOptions.RemoveEmptyEntries).Select(c => int.Parse(c));
        return m == null ? cells : cells.Zip(m, Math.Max);
    });

CSS

<div style="position: relative; top: 100px; left: 100px; width: 700px; height: 700px; background: #fff; overflow: hidden;">

<div>
    <ul id="navigation">
            <li class="ZoomIn" id="ZoomIn"><input type="button" title="ZoomIn"/></li>
            <li class="ZoomOut" id="ZoomOut" style="display:none"><input type="button" title="ZoomOut"/></li>
            <li class="Download" id="Download"><input type="button" title="Download"/></li>
            <li class="Play" id="Play" style="display:none"><input type="button" title="Play"/></li>
            <li class="Stop" id="Stop"><input type="button" title="Stop" /></li>
</ul>
    </div>

    <div id="first1" style="position: relative; top: 0px; left: 48px; width: 500px; height: 500px; background: #191919; overflow: hidden;">

</div>
</div>    
</div>

Answer 5

在这里：http://fiddle.jshell.net/6m8vw5jy/2/

您需要更新left：property修复z-index并删除overflow：hidden。