html - 通常在 li 内格式化文本(列表项)

Question

在我网站的一个页面中，我有一个 <ul>设置。在每个 <li> 内在<ul> ，有一张图片和一些文字。当我先放入图像，然后尝试放入文本时，文本被下推并且无法正确设置格式。我试图添加 vertical-align: text-top到图像，但这只是将文本推到顶部，并且不允许随着添加更多文本而向下移动。

JSFiddle - http://jsfiddle.net/kh4xC/

HTML

<div id="older-videos">    
<ul>
            <li>
            <img src="../Images/Article Images/GuliyevFace14.png" class="li-image" />
            Heydər Oğuzun Rəsul Quliyevlə Müsahibəsi - 29 İyul 2012, 2-ci hissə

            </li>

    </ul>
</div>

CSS

#older-videos ul li {
    display:block;
    width:600px;
    height:162px;
    background-color:#EEEEEE;

}
#older-videos ul li img{ vertical-align:text-top;
}
.li-image {
    width:250px;
    height:162px;
    -moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 5px 1px 5px #888;
    }

Answer 1

很好，您声明每个 <li>作为 block 元素。我认为下一步就是为您的图像分配一个 float 。如果您想要文本左侧的图像，只需声明 float: left for the .li-image类(class)。我不太确定将文本与 <li> 对齐的能力属性，但您也可以尝试垂直对齐和文本对齐，为 <li> 声明.

不过，我建议在任何一种情况下都保留 display:block 和 float 图像。这应该会使您在使用 CSS 的浏览器中更大的布局意图变得困难。