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：相對於父級？

回答

相關問題