Question

我正在尝试为我的网站创建导航栏。除购物车选项外，我还想购买购物车图片。我正在尝试使用float：right;和边距，以便能够定位此元素。出于某种原因，保证金被忽视并且不起作用。我已经查看了关于这个主题的无数问题，但没有一个答案与我的问题有关。任何帮助是极大的赞赏。我再次理解他们对我的问题有很多疑问，但没有一个问题导致修复。我也尝试过填充，但这也没有用。在此先感谢您的帮助。非常感谢。以下是我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

当您使用float:right时，逻辑上使用margin-right属性是因为float: right会将项目推到最右边，如果您想在元素和最右边界你必须使用margin-right。

相反的方式不起作用，因为你设置的元素是向右浮动的，但同时你设置的左边距将被浮动属性覆盖。

同样设置左边距是一个硬编码的解决方案，即你不知道在不同的屏幕尺寸上需要多大的余量。但相反，你最有可能知道从右侧边缘应该有多大。

请查看下面的代码段。

＆＃13;

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

＆＃13;

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

＆＃13;

使用浮动时，边距会被忽略

1 个答案: