javascript - 通过将图像附加到列表的元素，其他元素会下降

Question

我有一个 block 列表，当我将图像附加到列表的任何元素时，其他元素就会下降

这是 HTML:

    <ul class="small_slides">

        <li>
            <img src="../images/icons/add_2.png" class="open_popup" status="off">
        </li>
        <li>
            <img src="../images/icons/add_2.png" class="open_popup">
        </li>
    ...................
    </ul>

这里是js代码:

   function some_event() {

     var index = $(this).parent().parent().parent().attr("index");
     var small_slides_child = $(".small_slides li:nth-child("+index+")");

     $("#main_slide, .small_slides li:nth-child("+index+")").append("<img src='"+src+"' class='img_slide'>");
     small_slides_child.css({"border":"1px solid #000000", "box-shadow":"0px 0px 0px 2px #696969"});
     small_slides_child.append("<img src='../images/icons/add_2.png' class='add_2'>");

    }

和CSS代码:

 .small_slides li {
     display: inline-block;
     width: 125px;
     height: 75px;
     border: 3px dashed #808080;
     background:#F5F5F5;
     text-align: center;
     margin-left: 40px;
     margin-top: 20px;
     cursor: pointer;
}

这里是...

我真的不明白为什么会这样，感谢您的帮助和建议!

Answer 1

试试这个:

.small_slides li {
   vertical-align:top;
   .....
}