擴展HR寬度所有屏幕忽略容器的寬度

我有50％的寬度div容器內的HR元件和我想HR延伸到屏幕忽略它的父寬度的所有寬度。擴展HR寬度所有屏幕忽略容器的寬度

我知道我可以通過在容器外部應用HR來解決這個問題，並使用相對位置使它移動到必須位置......但是還有其他解決方案嗎？

我試着設置寬度超過100%，可以說300%並讓它溢出，但它只會放大到右側（並顯示一個醜陋的滾動條）。

瀏覽器視爲HR作爲塊，但我無法將其與margin: 0 auto對齊（在重新調整它的大小後）。

有沒有辦法做到這一點，而沒有相對定位？

來源

2012-12-30 jviotti

用'！important;'嘗試一下。另見[link]（http://stackoverflow.com/questions/946645/how-to-ignore-parent-css-style）。 – Vucko

子元素不會忽略容器。如果我將兩種樣式應用於相同的元素，重要的僅僅是有用的 – jviotti

可以使用陰性切緣爲hr這樣的：

hr { 
    width: 200%; 
    margin-left: -50%; 
}

Fiddle

注意，這些％如果其父項div處於最高級別並且/或者沒有其他父項具有width,padding或margin時，它將僅延伸到視口的末端tached。要解決這個問題，可以試試width: 9999px; margin-left: -3333px;和overflow: hidden上body

來源

2012-12-30 15:25:37 Scrimothy

如果你使用了正確的價值觀，使用相對定位不使用滾動條的工作原理：

div { 
    width: 50%; 
    min-height: 20em; 
    margin: 0 auto; 
} 

hr { 
    width: 200%; 
    position: relative; 
    left: -50%; 
}

如果一個div爲50％，並且希望HR是根（100％的兩倍大50％），使用200％。對於25％的div，使用400％小時，等

Demo

來源

2012-12-30 15:06:52 bookcasey

我搜索了一個類似的東西后，偶然發現了這個問題。由於（可惜）我沒有找到這個問題的CSS-only解決方案，我最終使用jQuery來完成這項工作。

function hrExpand() { 
    var windowWidth = $(window).width(); 
    $('hr').width(windowWidth).css('margin-left', function(){ 
    return '-' + ($(this).offset().left) + 'px'; 
    }); 
}

只要確保運行onload和onresize函數。

例子：http://codepen.io/anon/pen/qEOoGb

（你可以替換$（「小時」）與如$（「內容>小時」）來提高性能一點，並防止其全部更換小時是你的頁面上）

來源

2014-12-02 22:47:19 elveti

擴展HR寬度所有屏幕忽略容器的寬度

回答

相關問題