Question

CSS：

.price {
    display: inline-block;
    width: 19%;
    background-color: pink;
    margin-right: 8%;
}
.last {
    margin-right: 0%
}

 .container {
    width: 780px;
    margin:0px auto;
}
* {
    margin: 0px;
    padding: 0px;
}

我不明白的是，我有 4 * 19 + 3 * 8 ，它应该等于100％，但它仍然不适合一条线？

Answer 1

进一步详述，以下是解决问题的几种方法：

注释空间
```
</div><div>
```
将空格放在标签
中
```
</div
><div>
```
将其推到一行
```
</div><div>
```

最后一个，特别是，理想情况下你应该缩小你的HTML - 我使用PHP魔术即时运行，并且我可以编写可读的HTML 和没有空格。

Answer 2

<强> CSS

.price {
   width: 19%;
   background-color: pink;
   margin-right: 8%;
   float:left;
}

http://jsfiddle.net/3GPTy/10/

Answer 3

这是因为浏览器如何处理字体;它在字母之间放置了一小块空格，使字符正确地分隔开来。与直觉相反，这个想法适用于所有元素，因此如果你有两个50％宽度的div，它们将不适合在同一条线上，因为添加的小空格使得总宽度大于100％。

要解决此问题，请添加：

font-size: 0;

到父div。然后，您可以在其子项中设置所需的字体大小，以删除原本已添加的白色间距

这里有关于CSS诀窍article的问题的更多细节，以及其他灵魂，包括浮动元素和使用评论。

为什么内联块等于100％不适合一行

3 个答案: