<li>位置偏移问题：用<li>设置About的第二个区域，为什么图片和文本框区域不能对齐

用<li>设置About的第二个区域，为什么图片和文本框区域不能对齐

然后对图片设置顶部距离，margin-top: 18px;图片与文本框是对齐了，但是却发生了一个li单独一行的现象，这种问题要怎么处理？

另外，中间那个间隔要怎样去除呢？

这个区域的代码如下，html代码

<div class="show_2">

<ul>

<li><img src="images\b1.jpg"></li>

<li>

<div class="domain">

    <h3 class="h3">Library</h3>

    <P class="word_1">

    In my old griefs and with my childhood's faith

    </P>

    <p class="word_2">

    I love thee with a love I seemed to lose.With my lost saints.I love thee with the breath.Smiles tears of all my life.And if God choose.

    </p>

    <input type="button" name="" value="EXPLORE">

</div>

</li>

<li><img src="images\b2.jpg"></li>

<li>

<div class="domain">

    <h3 class="h3">Computer Lab</h3>

    <P class="word_1">

    In my old griefs and with my childhood's faith

    </P>

    <p class="word_2">

    I love thee with a love I seemed to lose.With my lost saints.I love thee with the breath.Smiles tears of all my life.And if God choose.

    </p>

    <input type="button" name="" value="EXPLORE">

</div>

</li>

<li>

<div class="domain">

    <h3 class="h3">Conference Hall</h3>

    <P class="word_1">

    In my old griefs and with my childhood's faith

    </P>

    <p class="word_2">

    I love thee with a love I seemed to lose.With my lost saints.I love thee with the breath.Smiles tears of all my life.And if God choose.

    </p>

    <input type="button" name="" value="EXPLORE">

</div>

</li>

<li><img src="images\b3.jpg"></li>

<li>

<div class="domain">

    <h3 class="h3">Play Ground</h3>

    <P class="word_1">

    In my old griefs and with my childhood's faith

    </P>

    <p class="word_2">

    I love thee with a love I seemed to lose.With my lost saints.I love thee with the breath.Smiles tears of all my life.And if God choose.

    </p>

    <input type="button" name="" value="EXPLORE">

</div>

</li>

<li><img src="images\b4.jpg"></li>

</ul>

<div class="directing_left"></div>

<div class="directing_left"></div>

<div class="directing_right"></div>

<div class="directing_right"></div>

</div>

css代码

.About .show_2{

width: 1700px;

margin:20px auto;

}

.About .show_2 ul{

margin:0px;

padding:0px;

list-style:none;

width: 1700px;

}

.About .show_2 ul li{

float: left;

}

.About .show_2 .domain{

width: 454px;

background-color: #66CCFF;

border:none;

height: 396px;

}

.About .show_2 img{

margin-top: 18px;

}