顯示：內嵌塊問題

我在我的代碼中使用display：inner-block。但內聯塊自動分配之間的填充導致瀏覽器不兼容在我的網站。任何人都可以指出一個解決方案。顯示：內嵌塊問題

這裏基本reference.Here可以清楚地看到的填充通過內部塊屬性分配一個小提琴

http://jsfiddle.net/damsarabi/vbhnF/#&togetherjs=4aiQ9gSCpq

這是基本的代碼爲在小提琴

<div class="LabelColumn">label column</div> 
<div class="DataColumn">data column</div> 


div{ 
border:1px solid #000 
} 

div.LabelColumn 
{ 
    display: inline-block; 
    vertical-align: top; 
}

問候參考，

來源

2013-12-16 Maclean Pinto

行內塊不會自動添加餘量，它是inl ine，這意味着它需要注意每個元素之間的空白區域。儘管這可能看起來像一個4px左右的邊距，但它不是，這是一個單一的空間。一種方法來避開這將是刪除空格：

<div class = "LabelColumn">asdfasdf</div><div class = "LabelColumn">asdfasdf</div><div class = "DataColumn">data</div><div class = "LabelColumn">asdfasdf</div><div class = "DataColumn">data</div><div class = "LabelColumn">asdfasdf</div><div class = "DataColumn">data</div>

另外，註釋掉空白：

<div class = "LabelColumn">asdfasdf</div><!-- 
--><div class = "LabelColumn">asdfasdf</div>

JSFiddle

或者最後，但絕非最不重要的，float:left而不是更改display類型：

JSFiddle

來源

2013-12-16 09:48:24 George

+1：打我吧:) – NoobEditor

我讀了這一點。男人我怎麼能忘記。用這個浪費了5個小時。謝謝夥伴 –

很高興已經幫助。 – George

默認情況下，存在4px的額外餘量（根據字體大小的父級）。

你可以通過css調整來解決這個問題。這是我經常使用的解決方案，並且它是調整此對齊的簡單方法。

div.LabelColumn 
{ 
    display: inline-block; 
    vertical-align: top; 
    margin-right: -4px; 
}

你可以看到這個鏈接更多的調整：http://css-tricks.com/fighting-the-space-between-inline-block-elements/

來源

2013-12-16 09:50:21 jbr

我推薦閱讀上面提到的CSS-Tricks文章 - 我也讀過它，它非常有幫助。 +1。 – keaukraine

您也可以設置容器的font-size到0和浮動元素設置必要font-size。這將消除空間。這對於無法避免元素之間出現空白的情況很有用（例如，某些IDE可以配置爲自動重新格式化標記）。

div.LabelColumn 
{ 
    font-size:16px; 
    display: inline-block; 
    vertical-align: top; 
    text-align:left; 
    border:1px solid #000; 
} 

.full_width { 
    width:100%; 
    font-size:0; 
}

演示： http://jsfiddle.net/keaukraine/htAR6/2/

來源

2013-12-16 09:59:43 keaukraine

試試這個：

<div class="LabelColumn">label column</div> 
<div class="DataColumn">data column</div> 

div.LabelColumn 
{ 
    font-size:16px; 
    display: inline-block; 
    vertical-align: top; 
    text-align:left; 
    border:1px solid #000; 
} 

.full_width { 
    width:100%; 
    font-size:0; 
}

來源

2013-12-16 10:14:03

顯示：內嵌塊問題

回答

相關問題