如何删除新行框css的margin-left

Question

我动态生成框，当屏幕溢出时，我在框之间给出margin-left它进入下一行但是以margin-left开始。如何删除下一行留下的边距。

<div style="width: 200px; height: 200px; background-color: green; float: left;">test</div>
<div style="width: 200px; height: 200px; background-color: green; margin-left: 10px; float: left;">test</div>
<div style="width: 200px; height: 200px; background-color: green; margin-left: 10px; float: left;">test</div>
<div style="width: 200px; height: 200px; background-color: green; margin-left: 10px; float: left;">test</div>
<div style="width: 200px; height: 200px; background-color: green; margin-left: 10px; float: left;">test</div>
<div style="width: 200px; height: 200px; background-color: green; margin-left: 10px; float: left;">test</div>

问题：

这里是小提琴链接：https://jsfiddle.net/jotftL3z/1/

Answer 1

你可以给它保证金权:)

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
</head>
<body>
	<div style="width: 200px; height: 200px; background-color: green; margin-right:10px;float: left;">test</div>
	<div style="width: 200px; height: 200px; background-color: green; margin-right:10px; float: left;">test</div>
	<div style="width: 200px; height: 200px; background-color: green; margin-right:10px; float: left;">test</div>
	<div style="width: 200px; height: 200px; background-color: green; margin-right:10px; float: left;">test</div>
	<div style="width: 200px; height: 200px; background-color: green; margin-right:10px; float: left;">test</div>
	<div style="width: 200px; height: 200px; background-color: green; margin-right:10px; float: left;">test</div>

</body>
</html>

Answer 2

从所有div中删除margin-left并添加margin-right。如果你想要留下空间，将所有div放在div中并给左边距或左边边距。

Answer 3

两种选择：

添加填充到容器，并在每个框的右侧而不是左侧（如果您不希望在容器中填充，则在框的左侧和右侧添加边距）。
请改用Flexbox模型！

看看这个，我想你会找到你的预期用例的例子：http://flexboxgrid.com/

希望能帮助到你。

Answer 4

您可以使用第n个子CSS来定位有问题的边距。

在桌面上，这将删除每四个项目留下的边距。

div:nth-child(4){
   margin-left: 0;
}

然后，您可以针对不同的屏幕大小调整媒体查询中的第n个子项。

在这里查看你的CSS

CSS tricks Nth child guide

Answer 5

我认为你可以像这样使用margin-right替换形式边距

[jsfiddle.net/jotftL3z/7][1]

Answer 6

只需做一件事就是将你的保证金分成10px到5px并给每一方都像

margin: 0 5px;

Answer 7

如果你想在没有特定边距的情况下同等地放置<div>，你可以为所有div添加一个容器，并在该容器上添加这个CSS display: flex; justify-content: space-between; flex-wrap: wrap;。更多关于flexbox here。这对于使其响应也很有用。

<div style="display: flex; justify-content: space-between; flex-wrap: wrap;">
  <div style="width: 200px; height: 200px; background-color: green;">test</div>
  <div style="width: 200px; height: 200px; background-color: green;">test</div>
  <div style="width: 200px; height: 200px; background-color: green;">test</div>
</div>

如果你必须给一个margin-left并且每个第6个元素都在它自己的行上，那么你也可以在nth-of-type CSS psuedo-class上使用div，如下所示：

div:nth-of-type(5n+1) { 
  margin-left: 0; 
}

最后，正如其他答案所指出的那样，您也可以使用margin-right代替。

如何删除新行框css的margin-left

问题描述投票：0回答：7

7个回答

最新问题

如何删除新行框css的margin-left

问题描述 投票：0回答：7

7个回答

最新问题

问题描述投票：0回答：7