Question

我想用列表项对每行进行垂直对齐。

我试图把

display:inline-block; vertical-align:middle;

到'li'但布局看起来不同。如何调整CSS？

HTML

<div class="half-box">
    <div class="ticket-list-box">
        <ul>
            <li><span class="img"><img src="http://www.goeasyholiday.com/upload/image/_airline/1_thai_airways.gif"></span><a href="#">Cheap Ticket To Bangkok</a><span class="price">1,950</span></li>
            <li><span class="img"><img src="http://www.goeasyholiday.com/upload/image/_airline/1_thai_airways.gif"></span><a href="#">Cheap Ticket To Bangkok xxxx London</a><span class="price">1,950</span></li>
            <li><span class="img"><img src="http://www.goeasyholiday.com/upload/image/_airline/1_thai_airways.gif"></span><a href="#">Cheap Ticket To Bangkok</a><span class="price">1,950</span></li>
            <li><span class="img"><img src="http://www.goeasyholiday.com/upload/image/_airline/1_thai_airways.gif"></span><a href="#">Cheap Ticket To Bangkok xxxx London</a><span class="price">1,950</span></li>
            <li><span class="img"><img src="http://www.goeasyholiday.com/upload/image/_airline/1_thai_airways.gif"></span><a href="#">Cheap Ticket To Bangkok xxxx London</a><span class="price">1,950</span></li>
            <li><span class="img"><img src="http://www.goeasyholiday.com/upload/image/_airline/1_thai_airways.gif"></span><a href="#">Cheap Ticket To Bangkok</a><span class="price">1,950</span></li>
            <li><span class="img"><img src="http://www.goeasyholiday.com/upload/image/_airline/1_thai_airways.gif"></span><a href="#">Cheap Ticket To Bangkok</a><span class="price">1,950</span></li>
            <li><span class="img"><img src="http://www.goeasyholiday.com/upload/image/_airline/1_thai_airways.gif"></span><a href="#">Cheap Ticket To Bangkok</a><span class="price">1,950</span></li>
            <li><span class="img"><img src="http://www.goeasyholiday.com/upload/image/_airline/1_thai_airways.gif"></span><a href="#">Cheap Ticket To Bangkok</a><span class="price">1,950</span></li>
            <li><span class="img"><img src="http://www.goeasyholiday.com/upload/image/_airline/1_thai_airways.gif"></span><a href="#">Cheap Ticket To Bangkok</a><span class="price">1,950</span></li>
        </ul>
    </div>
</div>

CSS：

body{
margin:0px;padding:0px;
font:normal 13px Tahoma;}
a{text-decoration:none;color:#08d39e}
a:hover{text-decoration:underline;}
.ticket-list{clear:left;float:left;}
.half-box{float:left;width:328px;}
.ticket-list-box{width:318px;height:240px;overflow:hidden;}
.ticket-list-box ul{padding:0;margin:0;list-style:none;}
.ticket-list-box ul li:nth-child(even){background:#cddff5;}
.ticket-list-box ul li.even{background:#cddff5;}
.ticket-list-box ul li{height:34px;border-right:1px solid #6fb6f3;}
.ticket-list-box ul li span.img{float:left;width:50px;padding-right:4px;overflow:hidden;}
.ticket-list-box ul li a{float:left;width:200px;}
.ticket-list-box ul li span.price{float:right;width:40px;padding-right:8px;font-weight:600;color:#ed368e;}

http://jsfiddle.net/eXdzd/

Answer 1

使用display: table-cell;来自IE8 +

的支持

选中此Working Demo

.ticket-list-box ul li span.img{ vertical-align: middle; display: table-cell; width:50px;padding-right:4px;overflow:hidden;}
.ticket-list-box ul li a{ vertical-align: middle; display: table-cell; width:200px;}
.ticket-list-box ul li span.price{ vertical-align: middle; display: table-cell; width:40px;padding-right:8px;font-weight:600;color:#ed368e;}

Answer 2

您只需要更改ticket-list-box ul li添加以下两行：

.ticket-list-box ul li{
   ...
   line-height: 30px;
   display: inline-block;
}

在Fiddle上查看！

列表项的垂直对齐

2 个答案: