Heim  >  Fragen und Antworten  >  Hauptteil

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之間有空隙,於是導致他沒辦法一行兩個
他會跑到下面去......

PHP中文网PHP中文网2764 Tage vor652

Antworte allen(8)Ich werde antworten

  • 阿神

    阿神2017-04-17 12:01:34

    换行符导致的,最简单的就是给layout添加font-size:0,而且这种问题网上真的是一搜一大把,http://www.zhangxinxu.com/wor... 这里有个张鑫旭的,可以看看

    Antwort
    0
  • ringa_lee

    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之间的空格试试

    Antwort
    0
  • 天蓬老师

    天蓬老师2017-04-17 12:01:34

    谢邀.

    inline-block元素间会有空隙,是因为每个元素间都会有换行(指每个layoutp类的<p>元素之间),具体的解决方案详见去除inline-block元素间间距的N种方法,我就不再赘述了。

    Antwort
    0
  • 伊谢尔伦

    伊谢尔伦2017-04-17 12:01:34

    inline-block把换行解析成空格了- -这是七八年前的问题了。。你可以自己百度下解决方法的
    下面给个例子

    .layout{font-size:0;}
    .layoutp{font-size:16px;}

    Antwort
    0
  • 阿神

    阿神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>

    Antwort
    0
  • 大家讲道理

    大家讲道理2017-04-17 12:01:34

    浮动

    .layoutp {
      float: left;
    }

    Antwort
    0
  • PHPz

    PHPz2017-04-17 12:01:34

    inline-block会有3-4px的间距。本身的属性带的。所以要想没有空隙,需要用浮动float属性

    Antwort
    0
  • PHP中文网

    PHP中文网2017-04-17 12:01:34

    这是inline-block把换行解析成空格了。。一般我们设置父级元素font-size:0就可以解决了

    Antwort
    0
  • StornierenAntwort