使用浮动时，保证金会被忽略

Question

我正在尝试为我的网站创建一个导航栏。在购物车选项旁边，我想合并一个购物车图像。我正在尝试使用 float:right;和保证金能够定位这个元素。由于某种原因，边距被忽略并且不起作用。我查看了无数关于此主题的问题，但 none 的答案与我的问题相关。任何帮助是极大的赞赏。再一次，我明白他们对我的问题有很多疑问，但其中 none 已得到解决。我也尝试过填充，但这也没有用。在此先感谢您的帮助。非常感谢。下面是我的代码：

.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>

Answer 1

当你使用float:right的时候，按理说应该使用margin-right 属性因为float: right会将item推到最右边，如果你想设置一些元素和最右边界之间的边距你必须使用 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>

使用浮动时，保证金会被忽略

When using float, margin gets disregarded

html

css

e-commerce