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この2行の追加を変更する必要があります。

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

フィドルでチェックしてください！

于 2012-10-26T05:55:48.517 に答える