floatを使用すると、余白が無視されます

私は自分のウェブサイトのナビゲーションバーを作成しようとしています。カートのオプションのほかに、ショッピングカートの画像を追加したいと思います。私はフロートを使用しようとしています：右;この要素を位置付けることができるマージン。何らかの理由で、マージンは無視され、機能しません。私はこのトピックに関する無数の質問を見てきましたが、答えのどれも私の問題に関連していませんでした。どんな助けでも大歓迎です。もう一度、私は自分の問題に関してたくさんの質問があることを理解していますが、そのうちのどれもが修正されていません。私もパディングを試みたが、それはどちらもうまくいかなかった。助けを前にありがとう。大変感謝しています。以下は私のコードです：floatを使用すると、余白が無視されます

.cart { 
 
    clear: both; 
 
    margin-left: 975px; 
 
    margin-top: -25px; 
 
    float: right; 
 
    display: block; 
 
    overflow: auto; 
 
}

<body> 
 
    <nav> 
 
    <ul> 
 
     <li><a href="#">Categories</a></li> 
 
     <li><a href="#">Sale</a></li> 
 
     <li><a href="#">Contact</a></li> 
 
     <li><a href="#">Login/Sign Up</a></li> 
 
     <li><a href="#">Cart</a></li> 
 
    </ul> 
 

 
    </nav> 
 

 
    <img src="shoppingcart.png" class="cart" height=25 width=25> 
 

 
</body>

出典

2017-06-02 Kg123

あなたがfloat:rightを使用し、それはfloat: rightが最も右側にアイテムをプッシュしますのでmargin-rightプロパティを使用して、論理的であり、あなたが間にいくつかのマージンを設定したい場合要素と最も右の境界を使用する必要がありますmargin-right。

要素を浮動小数点に設定すると同時に浮動小数点プロパティで上書きされる左余白を設定するため、逆の方法では機能しません。

また、左余白を設定することはハードコードされたソリューションです。つまり、画面サイズによっては余裕が必要な場合があります。しかし、代わりに、おそらくあなたは、マージンが右側からどれくらい大きくなるべきかを知っていることでしょう。

以下のスニペットをご覧ください。助けのための

.cart { 
 
    clear: both; 
 
    margin-top: -25px; 
 
    margin-right: 50px; 
 
    float: right; 
 
    display: block; 
 
    overflow: auto; 
 
}

<nav> 
 
    <ul> 
 
    <li><a href="#">Categories</a></li> 
 
    <li><a href="#">Sale</a></li> 
 
    <li><a href="#">Contact</a></li> 
 
    <li><a href="#">Login/Sign Up</a></li> 
 
    <li><a href="#">Cart</a></li> 
 
    </ul> 
 

 
    </nav> 
 

 
    <img src="https://d30y9cdsu7xlg0.cloudfront.net/png/28468-200.png" class="cart" height=25 width=25>

出典

2017-06-02 12:53:48 Chris

感謝。あなたは私の問題を解決しました。どうもありがとうございました。私は今答えを受け入れるだろう！ – Kg123

よろしくお願いします – Chris

floatを使用すると、余白が無視されます

答えて

関連する問題