Question

我做了这个HTML

<body style="margin:0px">

<div class="statbar">
<div class="stat">sd</div>
<div class="stat">sd</div>
<div class="stat">sd</div>
<div class="stat">sd</div>
<div class="stat">sd</div>
<div class="stat">sd</div>

</div>
</body>

由于页面以不同的分辨率显示，因此我使用百分比。我希望所有div之间的空间相同。

所以我有6个div，所以它们之间有7个间距。

100％-7％（每个间距为1％）= 93％。 93％/ 6 =每格15.5％。

所以，我使用这个CSS：

.stat{
background-color: #0072C6;
width: 15.5%; 
height: 50px;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 1%;
margin-right: 0px;
display:inline-block;
padding:0px;
border:0px;

}

.statbar{
display:inline-block;
padding:0px;
margin:0px;
width:100%;
}

总数应为总100％宽度的99％，但仍然不适合。为什么呢？

Answer 1

您的百分比很好，但由于您将显示更改为内联块，因此元素现在对代码中的空白区域敏感。试试这个来解决它：

<div class="statbar"><div class="stat">sd</div><div class="stat">sd</div><div class="stat">sd</div><div class="stat">sd</div><div class="stat">sd</div><div class="stat">sd</div></div>

<强> jsFiddle example

删除空格的另一种方法是使用HTML注释，如：

<div class="statbar">
    <div class="stat">sd</div><!--
    --><div class="stat">sd</div><!--
    --><div class="stat">sd</div><!--
    --><div class="stat">sd</div><!--
    --><div class="stat">sd</div><!--
    --><div class="stat">sd</div>
</div>

<强> jsFiddle example

另一种处理空间的技术是将父元素的字体大小设置为零，然后将您喜欢的非零大小设置为子元素。

<强> jsFiddle example

最后，你可以浮动统计数据：

.stat {
    background-color: #0072C6;
    width: 15.5%;
    height: 50px;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 1%;
    margin-right: 0px;
    display:inline-block;
    padding:0px;
    border:0px;
    float:left;
}

<强> jsFiddle example

Answer 2

我从CSS样式中删除了不必要的代码。这是working demo。

.stat {
  background-color: #0072C6;
  width: 15.5%; 
  height: 50px;
  display:inline-block;
  padding:0 auto;
  margin:0 auto
}

.statbar {
  width:100%;
}

无法在总宽度上对齐6个div

2 个答案: