css - 使用inline-block后上下不对齐

问题描述

问 题

  <section class="s1">  
        <div>
                <p>查询项</p>
                <div>
                    <p>第一项</p>
                    <img src="C:\Users\acer\tupian\blue_arrow.png">
                </div>    
            </div>
            <div>
                <p>买方</p>
                <div>
                    <p>小A</p>
                    <img src="C:\Users\acer\tupian\black_arrow.png">
                </div>
                <img src="C:\Users\acer\tupian\change.png">
                <p>卖方</p>
                <div>
                    <p>小C</p>
                    <img src="C:\Users\acer\tupian\black_arrow.png">
                </div>
            </div>
    </section>

    *{
            margin:0;
            padding: 0;
        }
         .s1{
            height: 85px;
            width: 890px;
            font-size: 13px;
            margin-left: auto;
            margin-right: auto;
            background-color: white;
            text-align: center;
            border: 1px solid #bdb5b5;
        }
        .s1>div{
            display: inline-block;
            margin-right: 35px;
            vertical-align: middle;
        }
        .s1 div p, .s1 div div{
            display: inline-block;
        }
         .s1 div div{
            border:1px solid #c3beba;
        }
         .s1 div:nth-child(1) div{
            width: 70px;
        }
         .s1 div:nth-child(1) div img{
            margin-left: 10px;
            vertical-align: middle;
        }
        .s1 div:nth-child(2){
            width:200px;
        }
        .s1 div:nth-child(2) div{
            width: 120px;
        }

买方和卖方为什么上下不对齐？另外请问在写程序过程中遇到奇怪的问题可以通过哪些途径解决。。

解决方案

去掉这一行就行了。
在写代码中有疑惑就谷歌。

另外建议重新学习CSS，你现在这样写也太费劲了吧，直接给同样的元素使用同一个class会好得多，没必要按照第几个位置来单独给一个样式。这样维护起来也很困难。

这篇关于css - 使用inline-block后上下不对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！