Question

我创建了这个fiddle，以便您可以看到我在说什么。我想要的是让“空车”按钮完全正确，但由于某种原因，有一个右边距推动它不合适。我将该元素的边距设置为零，并且我没有看到它在检查器中被覆盖，但仍有一个合适的边距。如果我试图将它漂浮到右边，边距会消失，但它会弄乱按钮下方的位置。我遇到的另一个问题是缺少img的最后一个商品。由于某种原因它不合适。我无法弄清楚为什么它略低于其他人。

以下是空购物车按钮的样式：

#emptyCartBtn{
  display: block;
  font-size: 0.67em;
  font-weight: 100;
  border: none;
  color: white;
  margin: 0px;
  background-color: transparent;
}

这是html

<div id="cartBottom">
  <label id="total">
    <span>Total: $</span><span>0.00</span>
  </label>
  <input type="button" value="Empty Cart" id="emptyCartBtn" >
  <input type="button" value="Confirm Purchase" id="purchaseBtn">
</div>

此处还有我的商品款式：

.ShopItem{
  display: inline-block;
  width: 250px;
  height: 340px;
  border: 1px solid #32C996;
  text-align: center;
  margin: 20px 20px 0px 0px;
}

Answer 1

这不是创造这个空间的边际。它上方的标签和按钮比页面上显示的标签宽得多，标签为text-align: right。如果您删除text-align，则会看到文字在相应元素的左侧对齐。

你可以正确地浮动这些元素，然后clear: right，这样就不会弄乱布局。然后，如果您希望空的购物车按钮与其上方/下方的元素齐平，请将其删除padding或仅padding-right或您想要的任何内容。

＆＃13;

body{
  font-family: sans-serif;
  margin: 0px;
}
img{
  max-width: 100%;
  height: auto;
}
h1{
  background-color: #32C996;
  color: white;
  width: 210px;
  font-family: sans-serif;
  margin-bottom: 0px;
  margin-left: 60px;
  text-align: center;
}
h2{
  margin-bottom: 0px;
  font-weight: 900;
}
h4{
  margin: 0px;
  font-weight: 100;
}
hr{
  border: 0;
  height: 2px;
  background: white;
  margin-left: 30px;
}
.ShopItem{
  display: inline-block;
  width: 250px;
  height: 340px;
  border: 1px solid #32C996;
  text-align: center;
  margin: 20px 20px 0px 0px;
}
.ShopItem img{
  height: 170px;
  width: 220px;
}
.fruitName{
 display: block;
font-weight: bold; 
}
.price{
  font-size: -webkit-xxx-large;
}
.stock{
  font-size: larger;
}
.inStock{
  margin: 10px 0px 10px 0px;
  font-weight: 500;
}
.addToCartBtn{
  width: 190px;
  height: 40px;
  font-size: larger;
  background-color: #32C996;
  border: none;
  border-radius: 10px;
}
.cartItem{
  height: 95px;
  background-color: #6FD9B5;
  margin-bottom: 15px;
  padding: 10px 10px 10px 25px;
}

.cartItem img{
  width: 80px;
  height: 60px;
  display: inline-block;
  
}
.quantity{
  position: relative;
  bottom: 12px;
  display: inline-block;
}
.count{
  color: black;
  font-size: x-large;
}
.countBtn{
  /*width: 20px;
  height: 17px;*/
  font-size: large;
  padding-top: 0px;
  padding-bottom: 0px;
  border-color: transparent;
  border-style: none;
  background-color: white;
  margin-left: 10px;
  margin-right: 10px;
}
.bottomHalf{
  color: black;
}
.bottomHalf label{
  font-size: small;
  font-weight: 800;
}
.deleteBtn{
  border: 0;
  color: white;
  float: right;
  font-size: medium;
  background-color: transparent;
}
#mainContent{
  width: 1450px;
  min-height: 800px;
  display: flex;
  margin: 0px 60px 0px 60px;
}
#shop{
  padding-bottom: 50px;
}
#shoppingCart{
  color: white;
  min-width: 350px;
  background-color: #32C996;
}
#shoppingHead{
  text-align: center;
}
#total{
  margin: 0px;
  display: block;
  text-align: right;
  font-weight: 900;
  font-size: 0.90em;
}
#emptyCartBtn{
  display: block;
  font-size: 0.67em;
  font-weight: 100;
  border: none;
  color: white;
  margin: 0px;
  background-color: transparent;
}
#purchaseBtn{
  width: 190px;
  height: 40px;
  color: black;
  border: none;
  font-weight: 900;
  font-size: medium;
  margin-top: 15px;
  margin-bottom: 25px;
  border-radius: 10px;
  background-color: #C0EFDF;
}
#cartBottom{
  float: right;
  margin-right: 15px;
}
#container{
  border-top: 5px solid #32C996;
  width: 100%;
}

#cartBottom > * {
  float: right;
  clear: right;
}

#emptyCartBtn {
  padding: 0;
}

＆＃13;

<body>
    <div id="app"><div data-reactid=".0"><h1 data-reactid=".0.0">Fruit</h1><div id="container" data-reactid=".0.1"><div id="mainContent" data-reactid=".0.1.0"><div id="shop" data-reactid=".0.1.0.0"><div class="ShopItem" data-reactid=".0.1.0.0.$0"><img src="" class="shopImg" data-reactid=".0.1.0.0.$0.0"><label class="fruitName" data-reactid=".0.1.0.0.$0.1">banana</label><div class="inStock" data-reactid=".0.1.0.0.$0.2"><span class="price" data-reactid=".0.1.0.0.$0.2.0"><span data-reactid=".0.1.0.0.$0.2.0.0">$</span><span data-reactid=".0.1.0.0.$0.2.0.1">1.25</span><span data-reactid=".0.1.0.0.$0.2.0.2"> </span></span><span class="stock" data-reactid=".0.1.0.0.$0.2.1"><span data-reactid=".0.1.0.0.$0.2.1.0">10</span><span data-reactid=".0.1.0.0.$0.2.1.1"> in Stock</span></span></div><input type="button" value="Add to Cart" class="addToCartBtn" data-reactid=".0.1.0.0.$0.3"></div><div class="ShopItem" data-reactid=".0.1.0.0.$1"><img src="" class="shopImg" data-reactid=".0.1.0.0.$1.0"><label class="fruitName" data-reactid=".0.1.0.0.$1.1">apple</label><div class="inStock" data-reactid=".0.1.0.0.$1.2"><span class="price" data-reactid=".0.1.0.0.$1.2.0"><span data-reactid=".0.1.0.0.$1.2.0.0">$</span><span data-reactid=".0.1.0.0.$1.2.0.1">2.5</span><span data-reactid=".0.1.0.0.$1.2.0.2"> </span></span><span class="stock" data-reactid=".0.1.0.0.$1.2.1"><span data-reactid=".0.1.0.0.$1.2.1.0">5</span><span data-reactid=".0.1.0.0.$1.2.1.1"> in Stock</span></span></div><input type="button" value="Add to Cart" class="addToCartBtn" data-reactid=".0.1.0.0.$1.3"></div><div class="ShopItem" data-reactid=".0.1.0.0.$2"><img src="" class="shopImg" data-reactid=".0.1.0.0.$2.0"><label class="fruitName" data-reactid=".0.1.0.0.$2.1">raspberry</label><div class="inStock" data-reactid=".0.1.0.0.$2.2"><span class="price" data-reactid=".0.1.0.0.$2.2.0"><span data-reactid=".0.1.0.0.$2.2.0.0">$</span><span data-reactid=".0.1.0.0.$2.2.0.1">4</span><span data-reactid=".0.1.0.0.$2.2.0.2"> </span></span><span class="stock" data-reactid=".0.1.0.0.$2.2.1"><span data-reactid=".0.1.0.0.$2.2.1.0">2</span><span data-reactid=".0.1.0.0.$2.2.1.1"> in Stock</span></span></div><input type="button" value="Add to Cart" class="addToCartBtn" data-reactid=".0.1.0.0.$2.3"></div><div class="ShopItem" data-reactid=".0.1.0.0.$3"><img src="" class="shopImg" data-reactid=".0.1.0.0.$3.0"><label class="fruitName" data-reactid=".0.1.0.0.$3.1">kiwi</label><div class="inStock" data-reactid=".0.1.0.0.$3.2"><span class="price" data-reactid=".0.1.0.0.$3.2.0"><span data-reactid=".0.1.0.0.$3.2.0.0">$</span><span data-reactid=".0.1.0.0.$3.2.0.1">3.33</span><span data-reactid=".0.1.0.0.$3.2.0.2"> </span></span><span class="stock" data-reactid=".0.1.0.0.$3.2.1"><span data-reactid=".0.1.0.0.$3.2.1.0">15</span><span data-reactid=".0.1.0.0.$3.2.1.1"> in Stock</span></span></div><input type="button" value="Add to Cart" class="addToCartBtn" data-reactid=".0.1.0.0.$3.3"></div><div class="ShopItem" data-reactid=".0.1.0.0.$4"><img src="" class="shopImg" data-reactid=".0.1.0.0.$4.0"><label class="fruitName" data-reactid=".0.1.0.0.$4.1">very delicious pineapple with a long name</label><div class="inStock" data-reactid=".0.1.0.0.$4.2"><span class="price" data-reactid=".0.1.0.0.$4.2.0"><span data-reactid=".0.1.0.0.$4.2.0.0">$</span><span data-reactid=".0.1.0.0.$4.2.0.1">4.75</span><span data-reactid=".0.1.0.0.$4.2.0.2"> </span></span><span class="stock" data-reactid=".0.1.0.0.$4.2.1"><span data-reactid=".0.1.0.0.$4.2.1.0">1</span><span data-reactid=".0.1.0.0.$4.2.1.1"> in Stock</span></span></div><input type="button" value="Add to Cart" class="addToCartBtn" data-reactid=".0.1.0.0.$4.3"></div><div class="ShopItem" data-reactid=".0.1.0.0.$5"><img src="./no-image.png" class="shopImg" data-reactid=".0.1.0.0.$5.0"><label class="fruitName" data-reactid=".0.1.0.0.$5.1">strawberries</label><div class="inStock" data-reactid=".0.1.0.0.$5.2"><span class="price" data-reactid=".0.1.0.0.$5.2.0"><span data-reactid=".0.1.0.0.$5.2.0.0">$</span><span data-reactid=".0.1.0.0.$5.2.0.1">2.05</span><span data-reactid=".0.1.0.0.$5.2.0.2"> </span></span><span class="stock" data-reactid=".0.1.0.0.$5.2.1"><span data-reactid=".0.1.0.0.$5.2.1.0">3</span><span data-reactid=".0.1.0.0.$5.2.1.1"> in Stock</span></span></div><input type="button" value="Add to Cart" class="addToCartBtn" data-reactid=".0.1.0.0.$5.3"></div></div><div id="shoppingCart" data-reactid=".0.1.0.1"><div id="shoppingHead" data-reactid=".0.1.0.1.0"><h2 data-reactid=".0.1.0.1.0.0">Shopping Cart</h2><h4 data-reactid=".0.1.0.1.0.1"><span data-reactid=".0.1.0.1.0.1.0">2</span><span data-reactid=".0.1.0.1.0.1.1"> items</span></h4></div><div id="cart" data-reactid=".0.1.0.1.1"><div class="cartItem" data-reactid=".0.1.0.1.1.$2"><div class="topHalf" data-reactid=".0.1.0.1.1.$2.0"><img src="" class="cartImg" width="80" height="60" data-reactid=".0.1.0.1.1.$2.0.0"><div class="quantity" data-reactid=".0.1.0.1.1.$2.0.1"><input type="button" value="-" class="countBtn" data-reactid=".0.1.0.1.1.$2.0.1.0"><label class="count" data-reactid=".0.1.0.1.1.$2.0.1.1">0</label><input type="button" value="+" class="countBtn" data-reactid=".0.1.0.1.1.$2.0.1.2"></div></div><div class="bottomHalf" data-reactid=".0.1.0.1.1.$2.1"><label data-reactid=".0.1.0.1.1.$2.1.0"><span data-reactid=".0.1.0.1.1.$2.1.0.0">@ $</span><span data-reactid=".0.1.0.1.1.$2.1.0.1">4</span><span data-reactid=".0.1.0.1.1.$2.1.0.2">each = $</span><span data-reactid=".0.1.0.1.1.$2.1.0.3">0.00</span></label><input type="button" value="Delete" class="deleteBtn" data-reactid=".0.1.0.1.1.$2.1.1"></div></div><div class="cartItem" data-reactid=".0.1.0.1.1.$3"><div class="topHalf" data-reactid=".0.1.0.1.1.$3.0"><img src="" class="cartImg" width="80" height="60" data-reactid=".0.1.0.1.1.$3.0.0"><div class="quantity" data-reactid=".0.1.0.1.1.$3.0.1"><input type="button" value="-" class="countBtn" data-reactid=".0.1.0.1.1.$3.0.1.0"><label class="count" data-reactid=".0.1.0.1.1.$3.0.1.1">0</label><input type="button" value="+" class="countBtn" data-reactid=".0.1.0.1.1.$3.0.1.2"></div></div><div class="bottomHalf" data-reactid=".0.1.0.1.1.$3.1"><label data-reactid=".0.1.0.1.1.$3.1.0"><span data-reactid=".0.1.0.1.1.$3.1.0.0">@ $</span><span data-reactid=".0.1.0.1.1.$3.1.0.1">3.33</span><span data-reactid=".0.1.0.1.1.$3.1.0.2">each = $</span><span data-reactid=".0.1.0.1.1.$3.1.0.3">0.00</span></label><input type="button" value="Delete" class="deleteBtn" data-reactid=".0.1.0.1.1.$3.1.1"></div></div></div><hr data-reactid=".0.1.0.1.2"><div id="cartBottom" data-reactid=".0.1.0.1.3"><label id="total" data-reactid=".0.1.0.1.3.0"><span data-reactid=".0.1.0.1.3.0.0">Total: $</span><span data-reactid=".0.1.0.1.3.0.1">0.00</span></label><input type="button" value="Empty Cart" id="emptyCartBtn" data-reactid=".0.1.0.1.3.1"><input type="button" value="Confirm Purchase" id="purchaseBtn" data-reactid=".0.1.0.1.3.2"></div></div></div></div></div></div>
    <script src="app.min.js"></script>
  

</body>

＆＃13;

当我将它设置为0时，为什么我仍然有一个正确的边距？

1 个答案: