Heim > Fragen und Antworten > Hauptteil
想問問假設
<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之間有空隙,於是導致他沒辦法一行兩個
他會跑到下面去......
阿神2017-04-17 12:01:34
换行符导致的,最简单的就是给layout
添加font-size:0
,而且这种问题网上真的是一搜一大把,http://www.zhangxinxu.com/wor... 这里有个张鑫旭的,可以看看
ringa_lee2017-04-17 12:01:34
.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之间的空格试试
天蓬老师2017-04-17 12:01:34
谢邀.
inline-block元素间会有空隙,是因为每个元素间都会有换行(指每个layoutp
类的<p>
元素之间),具体的解决方案详见去除inline-block元素间间距的N种方法,我就不再赘述了。
伊谢尔伦2017-04-17 12:01:34
inline-block把换行解析成空格了- -这是七八年前的问题了。。你可以自己百度下解决方法的
下面给个例子
.layout{font-size:0;}
.layoutp{font-size:16px;}
阿神2017-04-17 12:01:34
空白字符。
<p class="layout">
<p class="layoutp">內容</p><p class="layoutp">內容</p><p class="layoutp">內容</p><p class="layoutp">內容</p><p class="layoutp">內容</p>
</p>