如何解决第一次和最后冷却
product-div（1280px）
产品PC（5格，产品格内。1格大小为252px）
我想将这5个div集中在父级的一个div中。 我的计算如下：
product-div 1280px
product-pc 252px
252*5 = 1260px
Now i have 20px
20/4 = 5px
5/2 = 2.5
结果是要使用margin-left 2.5px和margin right 2.5px，
我想要的第一个孩子margin-left : 0px和最后一个孩子margin-right : 0px除外
我无法使它正常工作，我在做什么错？
.product-div {
display: flex;
width: 1280px;
margin-left: 10%;
margin-right: 10%;
}
product-div:first-child {
margin-left: 0px;
}
product-div:last-child {
padding-right: 0px;
}
.product-pc {
border: 1px solid;
border-color: grey;
margin-left: 2.5px;
margin-right: 2.5px;
}<div class="product-div">
<div class="product-pc">
<img src="img/product.jpg" alt="">
<p class="product-name">Pixel 2 XL</p>
<div>
<a class="product-price" href="#">500₾</a>
</div>
</div>
<div class="product-pc">
<img src="img/product.jpg" alt="">
<p class="product-name">Pixel 2 XL</p>
<div>
<a class="product-price" href="#">500₾</a>
</div>
</div>
<div class="product-pc">
<img src="img/product.jpg" alt="">
<p class="product-name">Pixel 2 XL</p>
<div>
<a class="product-price" href="#">500₾</a>
</div>
</div>
<div class="product-pc">
<img src="img/product.jpg" alt="">
<p class="product-name">Pixel 2 XL</p>
<div>
<a class="product-price" href="#">500₾</a>
</div>
</div>
<div class="product-pc">
<img src="img/product.jpg" alt="">
<p class="product-name">Pixel 2 XL</p>
<div>
<a class="product-price" href="#">500₾</a>
</div>
</div>
</div>解决方法
您缺少CSS .中的句点
.product-div .product-pc:first-child {
margin-left: 0px;
}
.product-div .product-pc:last-child {
margin-right: 0px;
}
根据您的问题，我认为您的子类是product-pc，因此您需要添加此类而不是product-div。另一件事是，您已将margin用于第一个孩子，将padding用于最后一个孩子。我为两者都增加了利润，因此您可以根据需要使用任何东西。
.product-pc:first-child{
margin-left: 0px;
}
.product-pc:last-child{
margin-right: 0px;
}
请使用正确的选择器。
.product-pc:first-child {
margin-left:0px;
}
.product-pc:last-child {
margin-left:0px;
}
您的代码有什么问题：
product-div:first-child
您正在选择没有孩子的父div。请选择“父级”的第一个div，然后使用第一个和最后一个子级。
就像在列表中一样，我们这样做
.PRECIOUS所以试试这个
ul li:first-child {}
为实现该空间，我会有所不同。除了选择第一个孩子和最后一个孩子之外，我还选择一个.product-pc，后跟一个.product-pc，然后给它一个左边界的两倍（在这种情况下为5px，而不是2.5px） 。这意味着除第一个产品外的所有.product-pcs都有左页边距。
我添加了灰色背景以更好地展示解决方案。
更少的代码。
没有奇怪的半像素。
.product-div{
display: flex;
width: 1280px;
margin-left: 10%;
margin-right: 10%;
background-color: #ccc;
}
.product-pc + .product-pc {
margin-left: 5px;
}
.product-pc{
border: 1px solid;
border-color: grey;
margin-left: 2.5px;
margin-right: 2.5px;
}<div class="product-div">
<div class="product-pc">
<img src="img/product.jpg" alt="">
<p class="product-name">Pixel 2 XL</p>
<div>
<a class="product-price" href="#">500₾</a>
</div>
</div>
<div class="product-pc">
<img src="img/product.jpg" alt="">
<p class="product-name">Pixel 2 XL</p>
<div>
<a class="product-price" href="#">500₾</a>
</div>
</div>
<div class="product-pc">
<img src="img/product.jpg" alt="">
<p class="product-name">Pixel 2 XL</p>
<div>
<a class="product-price" href="#">500₾</a>
</div>
</div>
<div class="product-pc">
<img src="img/product.jpg" alt="">
<p class="product-name">Pixel 2 XL</p>
<div>
<a class="product-price" href="#">500₾</a>
</div>
</div>
<div class="product-pc">
<img src="img/product.jpg" alt="">
<p class="product-name">Pixel 2 XL</p>
<div>
<a class="product-price" href="#">500₾</a>
</div>
</div>
</div>,
如果我对您的理解正确，则您希望第一个product-pc和最后一个justify-content: space-between都站在一边。
可以通过在您的product-pc容器中添加一个.product-div {
display: flex;
justify-content: space-between;
width: 1280px;
}
来完成。
像这样
width: 1280px;顺便说一句，设置元素的固定宽度不是一个好习惯。如果我是你，我将更改%以使用vw或width: 90vw。像这样： text
0 i like working with text
1 my favourite colour is blue and i like beans
2 i have a cat and a dog that are both chubby Pets
3 reading is also working with text just in anot...
4 cooking is great and i love making beans with ...
5 my cat likes cheese and my dog likes beans
6 in some way text is a bit boring
7 cooking is stressful when it is too complicated
8 pets can be so cute but they are often a lot o...
9 working with pets would be a dream job
。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
