Question

我有一个带显示的ul / li菜单：table / table-cell：auto layout，拉伸以填充容器并在菜单项之间分配水平空间。我必须将一个额外的UI元素与最后一个菜单项对齐。我可以通过将该元素添加为最后一个li元素的子元素并使其100％宽度来实现此目的。

但是，我需要将此UI元素（语言选择器）部分放在主要内容之外，因此我将其置于相对右侧：-10px。但副作用是选择器的左边缘与菜单元素相比向右移动。通常我会将选择器div的宽度增加10px，但由于它是100％，我不能这样做。父李的宽度由其文本内容决定。

有没有办法使用纯css来做到这一点？我无法在选择器上添加填充，因为我需要其子内容来填充整个div。

<div class="menu">
    <ul>
        <li><a href="#">first</a>
        </li>
        <li><a href="#">second</a>
            <div id="selector">
                <a href="#">EN</a>
                <a href="#">FR</a>
            </div>
        </li>
    </ul>
</div>

这是一个有效的例子： http://jsfiddle.net/hJXng/13/

感谢任何帮助。

Answer 1

根据您要支持的浏览器，一个简单的选项是使用calc：

width: calc(100% + 10px);

另见：Can I use calc()
示例：http://jsfiddle.net/hJXng/19/

Answer 2

我不确定xpy的答案在哪里，但他/她的评论终于结束了我的一天。不得不添加两个包装器div，因为带有“display：table”的div没有填充Chrome中的填充，而“display：block”就是这样。因此绝对定位一个100％宽的块div在另一个填充的div内实际上是有效的。

#selector-full {
    width: 100%;
    position: absolute;
    display: block;
    right: 0;
}

小提琴：http://jsfiddle.net/cPDd6/4/

div宽度100％+ 10px：相对于父母？

2 个答案: