css - div 與 inline block 空隙?
問題描述
想問問假設
<p class='layout'><p class='layoutp'>內容</p><p class='layoutp'>內容</p><p class='layoutp'>內容</p><p class='layoutp'>內容</p><p class='layoutp'>內容</p></p>
.layout{ width:100%; margin: 0 auto;}.layoutp{ cursor: pointer; position: relative; width: 50%; height: 100vh; display: inline-block; margin: 0;}
這樣會讓p之間有空隙,於是導致他沒辦法一行兩個他會跑到下面去......
問題解答
回答1:換行符導致的,最簡單的就是給layout添加font-size:0,而且這種問題網上真的是一搜一大把,http://www.zhangxinxu.com/wor... 這里有個張鑫旭的,可以看看
回答2:.layout { width:100%; margin: 0 auto; font-size:0; } .layoutp { cursor: pointer; position: relative; width: 50%; height: 100vh; display: inline-block; margin: 0; font-size: 14px; }
或者去掉p之間的空格試試回答3:
謝邀.
inline-block元素間會有空隙,是因為每個元素間都會有換行(指每個layoutp類的<p>元素之間),具體的解決方案詳見去除inline-block元素間間距的N種方法,我就不再贅述了。
回答4:inline-block把換行解析成空格了- -這是七八年前的問題了。。你可以自己百度下解決方法的下面給個例子
.layout{font-size:0;}.layoutp{font-size:16px;}回答5:
空白字符。
<p class='layout'><p class='layoutp'>內容</p><p class='layoutp'>內容</p><p class='layoutp'>內容</p><p class='layoutp'>內容</p><p class='layoutp'>內容</p></p>回答6:
浮動
.layoutp { float: left;}回答7:
inline-block會有3-4px的間距。本身的屬性帶的。所以要想沒有空隙,需要用浮動float屬性
回答8:這是inline-block把換行解析成空格了。。一般我們設置父級元素font-size:0就可以解決了
相關文章:
1. javascript - 在ie下為什么會出現這種情況呢 《 無法獲取未定義或 null 引用的屬性“length”》 ?請大神指教。2. 數據庫 - Mysql的存儲過程真的是個坑!求助下面的存儲過程哪里錯啦,實在是找不到哪里的問題了。3. javascript - 我是做web前端的,公司最近有一個項目關于數據統計的!4. MySQL主鍵沖突時的更新操作和替換操作在功能上有什么差別(如圖)5. javascript - 只是想用node建立一個簡單的服務器6. javascript - vuejs+elementui 購物車價格計算,點擊加減號修改數量總價都不會改變,但是計算執行了7. javascript - vue過渡效果 css過渡 類名的先后順序8. css右浮動字的順序顛倒了9. html5和Flash對抗是什么情況?10. javascript - 如何使用loadash對[object,object,object]形式的數組進行比較
