CSS水平法則是全寬度和調整到屏幕大小

我真的堅持這一點，基本上我使用wordpress，並希望水平線穿過頁面（突破內部容器）。這條線應該適應屏幕尺寸，所以如果你縮小線條應該不斷變長，基本上是無限的線條。CSS水平法則是全寬度和調整到屏幕大小

到目前爲止，我所能夠做到的是下面的代碼：

.horizontalrule1 { 
    position:relative; 
    height:82px; 
    background: #f1f2f2; 
    overflow:hidden; 
    width:600%; 
    margin-left: -100%; 
}

這在技術上看起來很好，但問題是它導致滾動頁面的底部出現，因爲寬度設置爲600％

如果將寬度設置爲100％，則不會使行寬變爲全寬，並將其停止在大約990像素的內部容器中。

我要的是一個infinate線將調整到屏幕大小，所以，如果你有1900px屏幕寬度的行應該是1900px等

希望這是有道理的。

我的HTML是：

<div class="horizontalrule1"></div>

給大家的我想要什麼更好的想法，看看onlywire.com，他們有舒展翻過網站厚厚的灰色水平線。這正是我想要做的。

來源

2013-12-12 user3096485

顯示你的HTML。 – kei

剛剛在我的html – user3096485

@ user3096485編輯過，你有我們可以檢查的網址嗎？ – Sabari

-1

你應該設置你的身體的填充和保證金爲0：

body{ 
    padding: 0; 
    margin: 0; 
}

來源

2013-12-12 18:06:17 Starboard

body padding＆margin設置爲0. – user3096485

你想讓它去外面的DOM元素？

.elementContainingYourHorizontalRule { 
    overflow: auto; /* or whatever, just don't set it to hidden. */ 
    position: relative; 
} 

.horizontalrule1 { 
    position: absolute; 
    width: 600%; 
    left: 50%; 
    margin-left: -300%; 
    height: 2px; /* or whatever. */ 
}

我不知道這是做事情的最好方法 - 如果我是你，我會想辦法讓你的包含元素去的頁面的整個寬度，讓您的自定義HR做它自己的事情自動。我明白這可能不適用於你的設計/佈局。

無論如何，如果你不給容器全寬，你的橫向規則將永遠無法知道你的頁面寬度。所以，你直到你得到你的容器全寬，纔會被困在一個醜陋的600％硬編碼中。

來源

2013-12-12 18:10:04

感謝您的回答，我嘗試將容器元素更改爲完整寬度，但不幸的是，該容器內部的所有內容均爲全寬，例如文本等。爲了給您舉例說明我希望它看起來，去onlywire.com，你會看到他們在他們的網站上有這些粗灰色的橫向規則，但是他們的所有文本和其他內容都顯示在容器中。 – user3096485

你很近。檢查了這一點，這就是我的意思：http://jsfiddle.net/54mbg/1/ –

這正是我需要的，我會給這個嘗試，並希望它的作品:) – user3096485

試試這個應該使用負水平的利潤率迫使它周圍的容器外：

hr { 
    margin: 20px -10000px; 
}

，並避免水平滾動條將它添加到身體：如果你只想要應用

body { 
overflow-x: hidden; 
}

到具體的水平統治者，將其添加爲一個類。

HTML：

<hr class="full">

在樣式表：

hr.full { 
margin: 20px -10000px; 
}

來源

2017-09-14 23:19:55

歡迎來到StackOverflow！雖然答案總是值得讚賞的，但請注意，這個問題在3年前被問及，問題提出者可能已經解決了問題。如果您想回答有問題的問題，您可以通過查看[**最新問題**]列表（https://stackoverflow.com/questions?sort=newest）獲益。我還建議查閱關於如何讓你的答案數爲一些提示的文章[**寫出很好的答案**]（http://stackoverflow.com/help/how-to-answer）:) –

CSS水平法則是全寬度和調整到屏幕大小

回答

相關問題