前幾天寫一頁
div{width:900px;} div li{ display:inline-block; width:300px;} <ul> <li></li>
<li></li>
<li></li>
</ul>
發現寬度為900px的div居然放不下3個寬度為300px的內聯元素li,只好改用了float:left來佈局。後來上網一查,才知道inline-block是有預設間距的,預設間距為4px,且inline也是有預設間距。現在就來盤點一些解決inline-block元素和inline元素之間間距的一些方法:
1、可以在html中直接把元素寫在一行上或把閉合標籤和第二個開始標籤寫在一行或兩行間添加註解或直接去掉閉合標籤但最後一個不能去掉。
2、設定margin-right為負值,但要考慮上下文的字體和文字大小。
3、先設定子元素字體,再設定父元素font-size:0px;////chrome中:-webkit-text-size-adjust:none;
4、設定父元素letter-spacing或word-spacing為負值,要考慮字體,子元素有文字也要注意設定letter-spacing或word-spacing的值。
5.float:left;