解决设置inline-block后不对齐问题

直接切入主题，添加 vertical-align: top; 就可以解决了。

附赠另一个问题

使用span标签或者a标签写按钮时，会发现写了一大堆，width和height无论怎样设置都没有宽高，其实只要加上display: inline-block;

或者display: block;

这是因为span和a都是内联标签，无法设置宽高。要变成块级标签设置的宽高才能使用。

使用inline-block后，该标签下方出现一片空白，使用vertical-align: bottom; 就可以了。

在一个block中，有两个inline-block，假设block的宽度1300px，然后一个inline-block的宽度是300px，一个inline-block的宽度是1000px,放在同一排，会出现不同高度，可以使用 vertical-align: top; 解决问题

.big_img {
    width: 300px;
    height: 600px;
    display: inline-block;
.big_img img {
    width: 300px;
    height: 600px;
.small_img {
    width: 1026px;
    height: 600px;
    display: inline-block;
    font-size: 0;
.small_img ul{
    width: 100%;
    height: 100%;
.small_img li {
    display: inline-block;
    background-color: white;
    width: 240px;
    height: 290px;
    margin-left: 16px;
    margin-bottom: 20px;
.small_img li img{
    background-color: white;
    width: 150px;
    height: 150px;
    display: block;
    margin: auto;
.small_img li p {
    font-size: 20px;
    text-align: center;
.small_img li p span {
    text-decoration: line-through;
    color: #b0b0b0;
<div class="big_img">
    <img src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c583f2edc613f1be20fa415910b13ce3.jpg?thumb=1&w=234&h=614&f=webp&q=90"
         alt="">
</div>
<div class="small_img">
            <img src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/61454401f855cf5ed64747a6ac04bae5.jpg?thumb=1&w=200&h=200&f=webp&q=90"
                 alt="">
            <p>Note 10 Pro</p>
            <p>天机1100年度旗舰芯</p>
            <p>1599起 <span>1699元</span></p>
            <img src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8909080ddb0851af0b87530e2927844f.jpg?thumb=1&w=200&h=200&f=webp&q=90"
                 alt="">
            <p>Redmi Note 10 5G</p>
            <p>5G小金刚｜旗舰长续航</p>
            <p>1599起 <span>1699元</span></p>
            <img src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5dc32ec73299ff79556dcd1cf0f0ac11.png?thumb=1&w=200&h=200&f=webp&q=90"
                 alt="">
            <p>Note 10 Pro</p>
            <p>天机1100年度旗舰芯</p>
            <p>1599起 <span>1699元</span></p>
            <img src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eb69512d9d6430d865d457ec52eebb51.png?thumb=1&w=200&h=200&f=webp&q=90"
                 alt="">
            <p>Note 10 Pro</p>
            <p>天机1100年度旗舰芯</p>
            <p>1599起 <span>1699元</span></p>
            <img src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/34caee2c867bfd8c5e0dc2d8c663e121.jpg?thumb=1&w=200&h=200&f=webp&q=90"
                 alt="">
            <p>Note 10 Pro</p>
            <p>天机1100年度旗舰芯</p>
            <p>1599起 <span>1699元</span></p>
            <img src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cb554f30eaa0316b0a736c3d59f21584.png?thumb=1&w=200&h=200&f=webp&q=90"
                 alt="">
            <p>Note 10 Pro</p>
            <p>天机1100年度旗舰芯</p>
            <p>1599起 <span>1699元</span></p>
            <img src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3b7fbb6fe07907c60f08358adab5adfe.png?thumb=1&w=200&h=200&f=webp&q=90"
                 alt="">
            <p>Note 10 Pro</p>
            <p>天机1100年度旗舰芯</p>
            <p>1599起 <span>1699元</span></p>
            <img src="http://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d47f7ecaa04d92bf2790d4a5d53d9099.png?thumb=1&w=200&h=200&f=webp&q=90"
                 alt="">
            <p>Note 10 Pro</p>
            <p>天机1100年度旗舰芯</p>
            <p>1599起 <span>1699元</span></p>
</div>
效果如下：
在塌陷元素中加上vertical-align: top;
.small_img {
    width: 1026px;
    height: 600px;
    display: inline-block;
    font-size: 0;
    vertical-align: top;
复制代码