div宽度100%+10px：相对于父元素吗？

Question

我有一个使用display:table/table-cell:auto布局的ul/li菜单，它被拉伸以填充容器并在菜单项之间分配水平空间。我必须将另一个UI元素对齐到最后一个菜单项。我可以通过将该元素添加为最后一个li元素的子元素并使其宽度为100%来实现这一点。

然而，我需要将此UI元素（语言选择器）部分放置在主内容之外，因此我通过相对定位right:-10px来定位它。但副作用是选择器的左边缘向右移动，与菜单元素相比。通常我会增加选择器div的宽度10px，但由于它是100%，所以我无法做到这一点。而父li的宽度是由其文本内容确定的。

是否有一种纯CSS的方法来解决这个问题？我不能在选择器上添加padding，因为我需要其子内容填满整个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/

- pandoukht

---

这是您想要的吗？我删除了-10px右侧规则，并添加了一些左填充和背景颜色以匹配。http://jsfiddle.net/hJXng/16/ - Matthew Blancarte

谢谢，不行，看：最后一句话是“我不能在选择器上添加填充，因为我需要它的子内容填满整个div”。当悬停在锚点上时，填充不会改变其颜色。至少我知道没有纯CSS解决方案。（顺便说一下，在发布问题之前，我已经实现了一个非常类似的解决方案，即在#selector上使用右填充和onmouseover bg-color更改。） - pandoukht

一个小建议：你使用了 display:table，table-cell 等属性，这使得我尝试使用大多数 CSS 技巧变得困难（例如 - 相对定位中的绝对定位或负边距）。 - Kobi

Answer 1

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

width: calc(100% + 10px);

参见：我能使用calc()吗？
示例：http://jsfiddle.net/hJXng/19/

- Kobi

---

谢谢Kobi，很好。虽然我必须支持IE8，有点糟糕。 - pandoukht

我已经寻找类似的东西有一段时间了！谢谢！ - Nuno Gonçalves

Answer 2

我不确定xpy的回答去了哪里，但他（她）的意见最终让我感到开心。由于在Chrome中具有“display:table”的div不能填充padding而“display:block”可以，因此必须添加两个包装器div。因此，在另一个带填充Div内部绝对定位一个100％宽的块状div实际上起到了作用。

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

代码片段：http://jsfiddle.net/cPDd6/4/

- pandoukht