2

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

我试着把

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/

4

2 回答 2

1

使用display: table-cell;它有来自 IE8+ 的支持

检查这个工作演示

.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;}
于 2012-10-26T05:40:49.783 回答
0

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

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

在小提琴上检查它！

于 2012-10-26T05:55:48.517 回答