div 宽度 100% +10px：相对于父级？答案

【问题标题】：div width 100% +10px: relative to parent?div 宽度 100% +10px：相对于父级？
【发布时间】：2013-02-17 10:47:40
【问题描述】：

我有一个带有 display:table/table-cell:auto 布局的 ul/li 菜单，它被拉伸以填充容器并在菜单项之间分配水平空间。我必须将一个额外的 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/

【问题讨论】：

这就是你想要的吗？我删除了 -10px 右规则，并添加了一些左填充和背景颜色以匹配。 jsfiddle.net/hJXng/16
谢谢，不，请参阅：“我无法在选择器上添加填充，因为我需要它的子内容来填充整个 div”。将鼠标悬停在锚点上时，填充不会改变其颜色。至少不是我知道的纯 css 解决方案。（顺便说一句，在发布我的问题之前，我已经在#selector 上实现了一个非常相似的解决方案，包括右填充和 onmouseover bg-color 变化。）
一个小评论：您对display:table、table-cell 等的使用使我尝试过的大多数 CSS 技巧难以使用（例如 - 绝对相对或负边距。

标签： html css menu width css-position

【解决方案1】：

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

width: calc(100% + 10px);

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

【讨论】：

谢谢科比，很好。虽然我必须支持IE8，但很糟糕。
我一直在寻找这样的东西有一段时间了！！谢谢！

【解决方案2】：

我不确定 xpy 的答案去了哪里，但他/她的 cmets 终于让我开心了。必须添加两个包装器 div，因为带有“display: table”的 div 没有填充 Chrome 中的填充，而“display: block”可以。因此，在另一个填充的 div 中绝对定位 100% 宽的块 div 确实有效。

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

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

【讨论】：