在窄列內攜帶寬項目

Question

我有一個寬度爲450px的窗體，其中一個項目必須佔滿整個頁面的寬度（990px​​）。

position:absolute是一個問題，因爲這個廣泛的項目需要適應窗體內的元素流。 margin-left:-270px似乎有點駭人聽聞，並可能打破未來規則的變化。有更好的解決方案嗎？

如何獲取表單流中佔用整個頁面寬度的元素？

Answer 1

如果您使用的是固定寬度佈局，我真的沒有看到-270的空白左邊爲黑客。如果你沒有自己發佈，這將是我建議的答案。

爲了讓它看起來不那麼黑客，可以使用Less - 它實際上是一種基於CSS的編譯爲純CSS的語言。然後，您可以指定規則，以便更改表單或頁面寬度將自動挑選出你的保證金也：

@page_width: 990px; 
@form_width: 450px; 
... 
.full_width_form_element { 
    margin-left: (@form_width - @page_width)/2; 
} 

http://lesscss.org/

Answer 2

使用CSS的overflow屬性。 overflow: auto導致滾動，overflow: visible允許它泄漏出框。 overflow: hidden隱藏任何部分泄漏到盒子外面。