使用inline-block后上下不对齐

Question

  <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;
        }

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

Answer 1

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

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

Answer 2

是要那两个买方，卖方在一行吗，还是怎样，可能是装两个p标签的宽度不够吧，把第二个div挤下去了

Answer 3

这个你用表格排多好……另外什么是“奇怪的问题”？

Answer 4

这都是什么布局啊

Answer 5

.s1 div:nth-child(2){
   width:200px;
}

div的宽度设置的太小了，一行容不下所有的元素，所以换行了。
你可以设置为auto试一下

Answer 6

.s1>div{

text-align:left;

}