我正在尝试为我的网站创建一个导航栏。在购物车选项旁边，我想合并一个购物车图像。我正在尝试使用 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>最佳答案
当您使用 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>关于html - 使用 float 时， margin 会被忽略，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44329370/