使用浮動時，保證金被忽略

我正在嘗試爲我的網站創建導航欄。除了購物車選項外，我還想整理購物車圖片。我正在嘗試使用float：right;和margin可以定位這個元素。出於某種原因，保證金被忽略並且不起作用。我已經瀏覽了關於這個主題的無數問題，但是沒有一個答案與我的問題有關。任何幫助是極大的讚賞。我再次明白他們對我的問題有很多疑問，但沒有一個能夠解決問題。我也試過填充，但那也沒用。預先感謝您的幫助。非常感謝。下面是我的代碼：使用浮動時，保證金被忽略

.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，它在邏輯上是使用margin-right財產，因爲float: right將項目推到最合適的，如果你想設置之間一定餘量元素和最正確的邊界，你必須使用margin-right。

相反的方式將無法正常工作，因爲您將元素設置爲向右浮動，但同時您將設置左邊距，該距離將被float屬性覆蓋。

同樣設置左邊距是一種硬編碼的解決方案，即您不知道在不同的屏幕尺寸上需要多大的邊距。但相反，你很可能知道右邊緣應該有多大。

請看下面的代碼片段。

.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

使用浮動時，保證金被忽略

回答

相關問題