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

Question

我在50% 寬度的div容器中有一個HR元素，我希望HR擴展到屏幕的所有寬度，而忽略它的父寬度。

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

我嘗試將寬度設置為超過100% ，比如說300%並讓它溢出，但它只會向右放大（並顯示一個丑陋的滾動條）。

瀏覽器將HR視為一個塊，但我無法使用margin: 0 auto將其居中（按上述方式調整大小后）。

有沒有辦法在沒有相對定位的情況下實現這一點？

Answer 1

您可以像這樣為hr使用負邊距：

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

小提琴

請注意，這些 %s 僅在其父div位於頂層和/或沒有其他父級具有width 、 padding或margin附加時才會延伸到視口的末尾。 為了解決這個問題，也許可以嘗試一個width: 9999px; margin-left: -3333px; width: 9999px; margin-left: -3333px; 和overflow: hidden在body

Answer 2

在搜索類似的東西后，我偶然發現了這個問題。 由於（遺憾的是）我沒有找到針對此問題的純 CSS 解決方案，因此我最終使用 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

（您可以將 $('hr') 替換為例如 $('.content > hr') 以稍微提高性能並防止它替換您頁面上的所有 hr）

Answer 3

如果使用正確的值，則使用相對定位無需滾動條即可：

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% hr 等

演示

Answer 4

如果使用順風：

<hr class="my-2 -ml-10 -mr-10"/> 

我還沒有測試過引導程序