3

50％の幅のコンテナ内にHR要素があり、親の幅を無視して画面のすべての幅に拡張したいと思います。 divHR

HRコンテナの外側を適用し、相対位置を使用して必要な場所に移動させることでこれを解決できることはわかっていますが、別の解決策はありますか？

幅を100%、と言っ300%てオーバーフローさせてみましたが、右に拡大するだけです（そして醜いスクロールバーが表示されます）。

ブラウザはブロックとして扱われますが、 （上記のようにサイズを変更した後）HR中央に配置できませんでした。margin: 0 auto

相対的なポジショニングなしでこれを達成する方法はありますか？

4

4 に答える 4

8

hr次のように負のマージンを使用できます。

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

フィドル

これらの％sは、その親divが最上位にある場合、および/または他の親に、、が接続widthされていない場合にのみ、ビューポートの最後まで拡張されることに注意してください。それを処理するには、多分aとanを試してみてくださいpaddingmarginwidth: 9999px; margin-left: -3333px;overflow: hiddenbody

于 2012-12-30T15:25:37.153 に答える
1

私は似たようなものを探した後、この質問に出くわしました。（残念ながら）この問題に対する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を置き換えないようにすることができます）

于 2014-12-02T22:47:19.343 に答える
0

適切な値を使用する場合、相対位置の使用はスクロールバーなしで機能します。

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

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

divが50％で、hrをルートの100％（50％の2倍）にしたい場合は、200％を使用します。25％divの場合、400％hrなどを使用します

デモ

于 2012-12-30T15:06:52.197 に答える
0

追い風で作業する場合：

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

ブートストラップをテストしていません

于 2020-10-23T09:37:32.957 に答える