0

わかりましたので、順序付けられていないリストを、すべて同じ要素内の画像とテキストで垂直方向に整列させるには、いくつかの助けが必要です。画像は、そのすぐ下のテキストと垂直方向に整列する必要があります。

これが私のコードです：

html:

<div id="sidetrans">
<ul>
<li><a data-ftrans="slide" href="slide2.html">iPhone 1&2<img alt="next"      src="images/iphone1.png" height="115" width="87" /></a></li>
<li><a data-ftrans="slide" href="">iPhone 3G<img alt="next" src="images/iphone1.png" height="115" width="87" /></a></li>
<li><a data-ftrans="slide" href="">iPhone 3GS<img alt="next" src="images/iphone1.png" height="115" width="87" /></a></li>
<li><a data-ftrans="slide" href="">iPhone 4<img alt="next" src="images/iphone1.png" height="115" width="87" /></a></li>
<li><a data-ftrans="slide" href="">iPhone4S<img alt="next" src="images/iphone1.png" height="115" width="87" /></a></li>
<li><a data-ftrans="slide" href="">iPhone5<img alt="next" src="images/iphone1.png" height="115" width="87" /></a></li>
</ul>
</div>

CSS

#sidetrans {
padding-top:15px;
text-align:left;}

#sidetrans a{
padding:0; }

#sidetrans a img{
 vertical-align: text-bottom;   }

#sidetrans ul li{
display:inline;
list-style: none;}
4

2 に答える 2

0

この行を削除します。この行は必要ありません。

#sidetrans ul li{
display:inline;
list-style: none;}

これをチェックしてくださいhttp://jsbin.com/oqeteh/5/edit

于 2013-03-31T18:38:07.340 に答える
0

私はこれを正しく理解していることを願っています。画像の下の垂直およびテキスト内のすべてのリンクが必要です。したがって、html に何らかの変更を加えれば、それで問題は解決します。画像の後にテキストを配置し、次に display: block; を配置します。画像用。

img {
display: block;
}

このペンをチェック

于 2013-03-31T18:08:54.837 に答える