Html 将div之间的间距放在水平行中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13497561/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Put spacing between divs in a horizontal row?
提问by user291701
I have 4 divs in a horizontal row. I want to put space between the divs (using margin, I guess?), but the divs overflow their parent container when I do that.
我在水平行中有 4 个 div。我想在 div 之间放置空间（使用边距，我猜？），但是当我这样做时，div 会溢出它们的父容器。
With zero margin, they line up nicely on one line:
零边距，它们在一行上排列得很好：
<div style="width:100%; height: 200px; background-color: grey;">
<div style="width: 25%; float:left; margin: 0px; background-color: red;">A</div>
<div style="width: 25%; float:left; margin: 0px; background-color: orange;">B</div>
<div style="width: 25%; float:left; margin: 0px; background-color: green;">C</div>
<div style="width: 25%; float:left; margin: 0px; background-color: blue;">D</div>
</div>Now when I introduce a margin of 5px, the last button wraps:
现在，当我引入 5px 的边距时，最后一个按钮会换行：
<div style="width:100%; height: 200px; background-color: grey;">
<div style="width: 25%; float:left; margin: 5px; background-color: red;">A</div>
<div style="width: 25%; float:left; margin: 5px; background-color: orange;">B</div>
<div style="width: 25%; float:left; margin: 5px; background-color: green;">C</div>
<div style="width: 25%; float:left; margin: 5px; background-color: blue;">D</div>
</div>I guess this is because the width attribute, when a percentage, doesn't take the margin into account for the element's total width? What's the right way to do this?
我猜这是因为宽度属性，当一个百分比时，不考虑元素的总宽度的边距？这样做的正确方法是什么？
Thanks
谢谢
回答by Cristian Lupascu
A possible idea would be to:
一个可能的想法是：
- delete the
width: 25%; float:left;from the style of your divs - wrap each of the four colored divs in a div that has
style="width: 25%; float:left;"
width: 25%; float:left;从你的 div 样式中删除- 将四个彩色 div 中的每一个都包装在一个具有
style="width: 25%; float:left;"
The advantage with this approach is that all four columns will have equal width and the gap between them will always be 5px * 2.
这种方法的优点是所有四列的宽度都相等，它们之间的间隙始终为 5px * 2。
Here's what it looks like:
这是它的样子：
.cellContainer {
width: 25%;
float: left;
}<div style="width:100%; height: 200px; background-color: grey;">
<div class="cellContainer">
<div style="margin: 5px; background-color: red;">A</div>
</div>
<div class="cellContainer">
<div style="margin: 5px; background-color: orange;">B</div>
</div>
<div class="cellContainer">
<div style="margin: 5px; background-color: green;">C</div>
</div>
<div class="cellContainer">
<div style="margin: 5px; background-color: blue;">D</div>
</div>
</div>回答by Pow-Ian
I would suggest making the divs a little smaller and adding a margin of a percentage.
我建议将divsa 小一点并增加一个百分比的余量。
<div style="width:100%; height: 200px; background-color: grey;">
<div style="width: 23%; float:left; margin: 1%; background-color: red;">A</div>
<div style="width: 23%; float:left; margin: 1%; background-color: orange;">B</div>
<div style="width: 23%; float:left; margin: 1%; background-color: green;">C</div>
<div style="width: 23%; float:left; margin: 1%; background-color: blue;">D</div>
</div>回答by Billy Moat
Quite a few ways to apprach this problem.
相当多的方法来解决这个问题。
Use the box-sizing css3 property and simulate the margins with borders.
使用 box-sizing css3 属性并用边框模拟边距。
div.inside {
width: 25%;
float:left;
border-right: 5px solid grey;
background-color: blue;
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
}
<div style="width:100%; height: 200px; background-color: grey;">
<div class="inside">A</div>
<div class="inside">B</div>
<div class="inside">C</div>
<div class="inside">D</div>
</div>
Reduce the percentage of your elements widths and add some margin-right.
减少元素宽度的百分比并添加一些边距。
.outer {
width:100%;
background:#999;
overflow:auto;
}
.inside {
float:left;
width:24%;
margin-right:1%;
background:#333;
}
回答by Jared
This is because widthwhen provided a %doesn't account for padding/margins. You will need to reduce the amount to possibly 24%or 24.5%. Once this is done you should be good, but you will need to provide different options based on the screen size if you want this to always work correct since you have a hardcoded margin, but a relative size.
这是因为width提供时 a%不考虑padding/ margins。您需要将数量减少到可能24%或24.5%。完成此操作后，您应该会很好，但是如果您希望它始终正常工作，则需要根据屏幕尺寸提供不同的选项，因为您有硬编码的边距，但有相对大小。
回答by gkond
You can set left margins for litags in percents and set the same negative left margin on parent:
您可以li以百分比为单位设置标签的左边距，并在父项上设置相同的负左边距：
ul {margin-left:-5%;}
li {width:20%;margin-left:5%;float:left;}<ul>
<li>A
<li>B
<li>C
<li>D
</ul>回答by KGemini22
Another idea: Compensate for your margin on the opposite side of the div.
另一个想法：在 div 的另一侧补偿您的边距。
For the side with the spacing you are looking to achieve as an example: 10px, and for the opposing side, compensate with a -10px. It works for me. This likely won't work in all scenarios, but depending on your layout and spacing of other elements, it might work great.
对于具有您希望实现的间距的一侧，例如：10px，对于另一侧，用 -10px 进行补偿。这个对我有用。这可能不适用于所有场景，但根据您的布局和其他元素的间距，它可能会很好用。
回答by The_HTML_Man
Put all the divs in a individual table cells and set the table style to padding: 5px;.
将所有 div 放在一个单独的表格单元格中，并将表格样式设置为padding: 5px;.
E.g.
例如
<table style="width: 100%; padding: 5px;">
<tbody>
<tr>
<td>
<div style="background-color: red;">A</div>
</td>
<td>
<div style="background-color: orange;">B</div>
</td>
<td>
<div style="background-color: green;">C</div>
</td>
<td>
<div style="background-color: blue;">D</div>
</td>
</tr>
</tbody>
</table>