爲什麼inline-block的這等於100％不適合在一行

這是我的代碼：http://jsfiddle.net/3GPTy/4/爲什麼inline-block的這等於100％不適合在一行

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％，但它仍然不適合一行？

來源

2014-07-03 Jimmy

空間。 –

我需要一點點，以讓我的牙齒進入恐懼 – Jimmy

空間。他們佔用空間。在你的'inline-block'元素之間，你有空格。所以你的總寬度是'4 * 19 + 3 * 8 +空間> 100％'一些額外的''。 –

CSS

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

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

來源

2014-07-03 14:44:44 midstack

其因的瀏覽器如何處理字體;在字母之間放置一小段空白字符以正確地將字符間隔開。直覺上這個想法適用於所有的元素，所以如果你有兩個50％寬度的div，它們將不能放在同一條線上，因爲添加的小空白區域會使總寬度大於100％。

爲了解決這個附加：

font-size: 0;

父DIV。然後，您可以在其子項中設置所需的字體大小，以消除原本會添加的白色間距

下面是有關此技巧的更多詳細信息，這些CSS技巧article以及其他靈魂提示，包括浮動元素和使用註釋。

來源

2014-07-03 14:45:14 agconti

爲了進一步闡述，這裏是解決問題的幾種方法：

註釋掉空間
```
</div><div> 
```
把空間的標籤
```
</div 
><div> 
```
只需將它推到一條線上
```
</div><div> 
```

最後一個特別，最好你應該涅槃你的HTML - 我做即時與PHP魔術，並與我可讀可寫HTML 和不能有空格。

來源

2014-07-03 14:45:53

謝謝你的幫助，但我更喜歡浮動選項 – Jimmy

@Jimmy好，但請記住，使用'浮動'有它自己的一套問題;） –

@NiettheDarkAbsol Float是一個比第一個更好的解決方案兩種解決方案想象一下其他開發人員維護你的代碼會在幾個地方刪除「不必要的評論」。他/她會因爲看到佈局發生變化而感到困惑，並且可能會花費數小時來搜索他們'真的沒有更改代碼'時發生的事情。 –

爲什麼inline-block的這等於100％不適合在一行

回答

相關問題