2

BorderCSSコマンドで単純な境界線を追加したい固定幅のページがあります。ただし、この境界線でページが膨らみ、小さい画面に水平スクロールバーが表示されるようにしたくありません。私はCSSがあまり得意ではありませんが、移動したくない他の要素に境界線を追加するのと同じようなことをすでに行っているので、境界線の幅をオフセットするために負のマージンを使用することを検討したことは十分に知っています。しかし、メインのコンテナdivでこれを行うと、すべてが中心から外れて、ページの左側に押しつぶされます。Blueprint CSSフレームワークを使用していますが、そこにマージンを乱しているものがあると思いました。メインコンテナに「Margin：0auto;」が適用されていることがわかりました。ページの中央に配置します。

それで、私は今、画面上のレイアウトを中央に配置したまま、ページに負のマージンの境界線を適用するにはどうすればよいのでしょうか？コンテナーをdivでラップし、境界線と負のマージンを適用しようとしましたが、サイコロはありません。コンテナー内にdivをネストして境界線をコンテナーに適用しようとしましたが、それもうまくいきませんでした。誰かが私に骨を投げます！

4

1 に答える 1

0

負のマージンが機能している場合は、固定幅と。のラッパーdivを追加することで、中央揃えを元に戻すことができますmargin: 0 auto。

私のテストでは、負のマージンはボックスの幅を変更しませんでした。他のいくつかの戦略：

  1. divの幅を調整して、境界線によって追加された幅をオフセットします。
  2. 左右の境界線をシミュレートする背景画像をdivに追加します。
  3. JavaScriptを使用してウィンドウの幅を検出し、必要に応じて境界線を削除します。
  4. body { overflow-x: hidden }水平スクロールバーを抑制するために追加します。
  5. CSS3メディアクエリを使用して、十分なスペースがある場合にのみ境界線を追加します（オプションで、古いブラウザーの場合はJavaScript（＃3を参照）にフォールバックします）。

更新：負のマージンの代わりに、おそらくbox-sizing：border-boxを使用して、最初から境界線が要素の幅に追加されないようにすることができます。

于 2011-01-28T18:38:14.673 に答える