HTML部分代碼

<div class="header_wrap">
	<ul>
		<li><a href="#">首頁</a></li>
		<li>新聞</li>
		<li>角色</li>
		<li>世界</li>
		<li>漫畫</li>
		<li>漫畫</li>
		<li>賽事</li>
	</ul>
</div>

CSS代碼

	.header_wrap ul {
		/* 元素空隙 的解決方案： 設(shè)置父元素， */
		display: table;
		word-spacing:-1em;
		/* 和word-spacing */
		margin: 0;
		padding: 0%;
	}
	.header_wrap ul li {
		/* 布局錯位 */
		display: inline-block; 
		/* 解決方案 */
		vertical-align: top;
		/* float: left; */
		width: 14%;
		height: 60px;
		line-height: 60px;
	}
	.header_wrap ul li a {
		display: block;	
	}

不理想的效果 發(fā)現(xiàn)還原不回來現(xiàn)場 尷尬 大概樣式

發(fā)現(xiàn)核心問題是 inline-block 默認的對齊方式

 vertical-align: baseline;

只需要設(shè)計

 vertical-align: top;

當然也可以是使用浮動float 或者 彈性盒子flex 完成上述需求

QQ瀏覽器

Firefox瀏覽器

設(shè)置行內(nèi)塊級元素之后，細心的人就會發(fā)現(xiàn)盒子間有空隙

檢查元素發(fā)現(xiàn)li標簽之間又顯示空白 布局裂縫

盒子模型 檢查 也沒有影響的元素

原因是換行符空格間隙引起的問題

解決方案

ul{
	/* 元素空隙 的解決方案： 設(shè)置父元素， */
	display: table;
	word-spacing:-1em;
}

最終效果

更多解決方案請參考

先給出一段關(guān)于行內(nèi)塊級元素(inline-block)中基線(baseline)的定義：

The baseline of an ‘inline-block’ is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its ‘overflow’ property has a computed value other than ‘visible’, in which case the baseline is the bottom margin edge.

翻譯一下：

對于一個 inline-block 元素，如果它內(nèi)部沒有內(nèi)聯(lián)元素，或者它的overflow屬性不是visible，那么它的linr-height就是元素margin的底端。否則，就是它內(nèi)部最后一個元素的基線。

css 使用display：inline-block的問題求解？

一、移除空格雖然可以解決，代碼可讀性大大降低。
	<div class="wrapper">
    	<div class="child1">child1</div><div class="child2">child2</div>
	</div>
二、使用 margin 負值.child2 {
    margin-left: -5px;
}
三、使用 font-size: 0.wrapper {
    font-size: 0;
}
.child1, .child2 {
    font-size: 14px;
}
四、letter-spacing.wrapper {
    letter-spacing: -5px;
}
.child1, .child2 {
    letter-spacing: 0;
}
五、word-spacing.wrapper {
    word-spacing: -5px;
}
.child1, .child2 {
    word-spacing: 0;
}

css div等塊元素設(shè)置display:inline-block存在間隙問題文章來源地址http://www.zghlxwxcb.cn/news/detail-608170.html

到了這里，關(guān)于CSS中display屬性的inline-block導(dǎo)致布局錯位問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！