html - div 宽度 100% +10px : relative to parent?

Question

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

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

有没有一种方法可以使用纯 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/