0

我想用ul+li做一个三栏式布局,然后发现含有pbutton等标签的li元素相对其中没有元素的li元素下移了一部分,然后做了下测试,测试代码如下:

html:

<ul>
    <li class="left">
        <p style="display: inline-block;">1</p>
    </li>
    <li class="center"></li>
    <li class="right"></li>
</ul>

css:

*{
    padding: 0;
    margin: 0;
    border: none;
    box-sizing: border-box;
}
html{
    font-family: "微软雅黑";
}
body{
}
ul{
    font-size: 0;
    margin: 0 auto;
    width: 1000px;
}
li{
    display: inline-block;
    text-align: center;
}
.left,.center,.right{
    width:300px;
    height:300px;
}
.left{
    background-color: #999;
}
.center{
    background-color: #ccc;
}
.right{
    background-color: #eee;
}

显示结果:

看起来就像一个p元素占了一行,开始以为是p元素是display:block的原因,但我给p加display:inline-block属性后,依然如此,去掉p元素后,三个li就在一行了,何解?请指教~

4个回答

1

已采纳

我来给你说说为什么吧。因为inline-block的vertical-align 属性默认是baseline(基线,如果这个也不懂,那就自己百度,要展开就太多了),在一行的inline-block需要基线对齐,而基准就是正常流中最后一个line box的基线,如果这个元素是空的,没有内容,也就是你上面写的那样,那么这个基线就是最这个元素的margin-bottom线;如果这个元素不为空,那么这个元素的基线就是元素里面内容最后一行文字的基线;所以这就会造成第一个和第三个错行的感觉,其实他两是为了基线对齐。所以最简单的解决方案就是为Li添加vertical-align: top;

0
  1. 给三个inline-block加上vertical-align:top;

  2. 用float: left来布局

0

三栏布局通常不是用ul li实现的,建议你换一种实现方法,而不是进一步研究这种方法
1.最传统的表格布局
2.利用浮动
3.绝对定位
4.CSS3多列
5.flex布局
以上方法都可以实现,具体你可以自己写一下

0

为什么不用浮动布局呢, 要走捷径呀

撰写答案