搜索
搜索

为什么当我将它设置为 0 时我仍然有右边距？

debugcn 发表于 Dev
7
克里斯托弗·斯蒂芬森

我创建了这个小提琴，以便您可以看到我在说什么。我想要的是让“空购物车”按钮正好在总数之下，但由于某种原因，有一个右边距将它推到了位置。我将该元素的边距设置为零，但我没有看到它在检查器中被覆盖，但仍然有右边距。如果我尝试将它向右浮动，边距就会消失，但它会弄乱按钮在其下方的位置。我遇到的另一个问题是缺少 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;
}
迈克尔·科克

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

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

当我在body元素中将边距和填充设置为0时，为什么仍保持水平滚动条？

来自分类Dev

为什么我的div的高度设置为0时仍然显示？

来自分类Dev

为什么当我<0时，我的while循环没有终止？

来自分类Dev

为什么当我在php中广告0 + 0时，我收到未定义的变量？

来自分类Dev

当我使用simplexml_load_file（）时，为什么preg_match（）结果在PHP中显示为0？

来自分类Dev

为什么我的函数打印为“ 0”？

来自分类Dev

为什么“ getWidth（）”为我返回0？

来自分类Dev

当我告诉ASP.NET网站项目以4.8为目标时，为什么将它定位为.NET Framework 4.6.1？

来自分类Dev

为什么追加到元素时我的增量为0

来自分类Dev

为什么不能将eth0设置为我的目标？

来自分类Dev

为什么我的Android应用程序始终将纬度和经度设置为0？

来自分类Dev

为什么我需要将 DISPLAY 变量设置为 10:0？

来自分类Dev

当我将YScale设置为log时，为什么我的XTickLabels在MATLAB中消失了？

来自分类Dev

当我的宽度设置为 100% 时，为什么我的网站会横向滚动？

来自分类Dev

当我使用 margin: 0 auto 时，为什么我的标题中心不显示？

来自分类Dev

为什么当我输入 irb 时，我的终端不显示 irb(main):001:0>？

来自分类Dev

当我验证输入为非0维时，为什么nn.CrossEntropyLoss抛出“ TypeError：在0维张量上迭代”？

来自分类Dev

为什么我的while循环（z == 0）仅设置一次为z == 0后会多次运行？

来自分类Dev

在Android TextView中，Text.BoringLayout WIDTH设置为0（未显示）当我有非英语文本时？

来自分类Dev

Android TextView中的Text.BoringLayout WIDTH设置为0（未显示）当我有非英语文本时？

来自分类Dev

为什么当我为CABasicAnimation设置较低的持续时间值时，它会跳吗？

来自分类Dev

当我将暗淡的长度设置为零时，为什么不会引起错误？

来自分类Dev

为什么当我为CABasicAnimation设置较低的持续时间值时，它会跳吗？

来自分类Dev

为什么即使将约束设置为0，UITableView上仍然还有余量

来自分类Dev

即使margin＆padding值为0，Div仍具有右边距

来自分类Dev

当我尝试使用Net :: SNMP连接到设备时，为什么会收到错误消息“ Received usmStatsUnknownUserNames.0 Report-PDU，值为1”？

来自分类Dev

当我的Auth0令牌从iOS发送到node.js服务器时，为什么总是返回为无效？

来自分类Dev

为什么当我的数组中的对象数应该为 3 时，count 返回 0？

来自分类Dev

当我为所有状态设置背景图像时，为什么UISegmentControl段在iOS 8中突出显示？

Related 相关文章

  1. 1

    当我在body元素中将边距和填充设置为0时，为什么仍保持水平滚动条？

  2. 2

    为什么我的div的高度设置为0时仍然显示？

  3. 3

    为什么当我<0时，我的while循环没有终止？

  4. 4

    为什么当我在php中广告0 + 0时，我收到未定义的变量？

  5. 5

    当我使用simplexml_load_file（）时，为什么preg_match（）结果在PHP中显示为0？

  6. 6

    为什么我的函数打印为“ 0”？

  7. 7

    为什么“ getWidth（）”为我返回0？

  8. 8

    当我告诉ASP.NET网站项目以4.8为目标时，为什么将它定位为.NET Framework 4.6.1？

  9. 9

    为什么追加到元素时我的增量为0

  10. 10

    为什么不能将eth0设置为我的目标？

  11. 11

    为什么我的Android应用程序始终将纬度和经度设置为0？

  12. 12

    为什么我需要将 DISPLAY 变量设置为 10:0？

  13. 13

    当我将YScale设置为log时，为什么我的XTickLabels在MATLAB中消失了？

  14. 14

    当我的宽度设置为 100% 时，为什么我的网站会横向滚动？

  15. 15

    当我使用 margin: 0 auto 时，为什么我的标题中心不显示？

  16. 16

    为什么当我输入 irb 时，我的终端不显示 irb(main):001:0>？

  17. 17

    当我验证输入为非0维时，为什么nn.CrossEntropyLoss抛出“ TypeError：在0维张量上迭代”？

  18. 18

    为什么我的while循环（z == 0）仅设置一次为z == 0后会多次运行？

  19. 19

    在Android TextView中，Text.BoringLayout WIDTH设置为0（未显示）当我有非英语文本时？

  20. 20

    Android TextView中的Text.BoringLayout WIDTH设置为0（未显示）当我有非英语文本时？

  21. 21

    为什么当我为CABasicAnimation设置较低的持续时间值时，它会跳吗？

  22. 22

    当我将暗淡的长度设置为零时，为什么不会引起错误？

  23. 23

    为什么当我为CABasicAnimation设置较低的持续时间值时，它会跳吗？

  24. 24

    为什么即使将约束设置为0，UITableView上仍然还有余量

  25. 25

    即使margin＆padding值为0，Div仍具有右边距

  26. 26

    当我尝试使用Net :: SNMP连接到设备时，为什么会收到错误消息“ Received usmStatsUnknownUserNames.0 Report-PDU，值为1”？

  27. 27

    当我的Auth0令牌从iOS发送到node.js服务器时，为什么总是返回为无效？

  28. 28

    为什么当我的数组中的对象数应该为 3 时，count 返回 0？

  29. 29

    当我为所有状态设置背景图像时，为什么UISegmentControl段在iOS 8中突出显示？

热门标签

归档