2016-08-24 38 views
-3

私は画像があり、CSSスタイルmargin-left:-50pxmargin-right:-50pxを入れましたが、ちょうど崩壊しています。左右のマイナスマージンが効かないのはなぜですか?

これを行う別の方法はありますか?

左右のマイナスマージンが正しく機能しないのはなぜですか?

コード:

<img class="myslide" src="img/text.jpg"> 

<Style> 
    .myslide { 
     margin-left:-50px; 
     margin-right:-50px; 
    } 
</style> 
+0

位置を追加する:相対。 –

+0

まだ動作していません、 –

+0

共有するコードはありますか? – user1725382

答えて

1

;カンマを忘れてしまいました。これはHTMLの特定の要素です。ラッパーを作成し、余白を追加します。0〜50ピクセル;幅:自動; そして、imgをwidth:100%に指定します。

.page { 
 
    width: 100px; 
 
    margin: 0 auto; 
 
    padding: 50px 0; 
 
    background-color: gray; 
 
} 
 
.wrapper { 
 
    margin: 0 -50px; 
 
} 
 
.wrapper img { 
 
    width: 100%; 
 
}
<div class="page"> 
 
    <div class="wrapper"> 
 
    <img src="http://www.dummyimage.com/200x100/000/fff/" /> 
 
    </div> 
 
</div>

0

画像は、インライン要素です。 display:blockを追加してみてください。あなたのイメージに 負のマージンではなく、親要素に配置することもできます。入力用と同じ -

+0

が動作していない、 –

0

CSSの構文エラー、私はスタイルの画像要素にこの方法を回避するのmargin-left

.myslide { 
     margin-left:-50px; 
     margin-right:-50px; 
    } 
+0

私はコンマを持っています、私は質問にそれを置くことを忘れました。 –

関連する問題