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

我有一个ul/li菜单显示：table/table-cell：自动布局，拉伸以填充容器并分配菜单项之间的水平空间。我必须将其他UI元素与最后一个菜单项对齐。我可以通过将该元素添加为最后一个元素的子元素并使其100％宽来实现此目的。div宽度100％+ 10px：相对于父级？

但是，我需要定位这个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/

任何帮助表示赞赏。

来源

2013-03-03 pandoukht

这是你要什么？我删除了-10px的右边规则，并添加了一些左边距和背景色以匹配。 http://jsfiddle.net/hJXng/16/ – 2013-03-03 06:45:06

谢谢，不，请参阅：“我不能在选择器上添加填充，因为我需要它的子内容来填充整个div”。悬停在锚上时，填充不会改变其颜色。至少不用我知道的纯CSS解决方案。（顺便说一下，在发布我的问题之前，我已经实现了一个非常类似的解决方案，在#selector上实现了正确的填充和onmouseover bg颜色更改。） – pandoukht 2013-03-03 07:26:49

小评论：您使用'display：table'，'table-cell'等，使得我很难使用我尝试的大多数CSS技巧（例如 - 绝对在相对或负边距。 – Kobi 2013-03-03 09:14:06

我不知道在哪里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/

来源

2013-03-06 11:35:05 pandoukht

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

width: calc(100% + 10px);

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

来源

2013-03-03 09:02:58 Kobi

感谢Kobi，不错。虽然我必须支持IE8，无赖。 – pandoukht 2013-03-04 13:43:16

我一直在寻找像这样的事情而现在!!谢谢！ – 2013-12-27 13:36:32

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

回答

相关问题