通常在 li(列表项)内设置文本格式

Question

在我的网站页面中，我有一个<ul>设置。在<ul>的每个<li>中，都有一个图像和一些文本。当我先放置图像，然后尝试放入文本时，文本被向下推，无法正确格式化。我试图为图像添加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>声明为块元素是件好事。我认为下一步是为您的图像分配一个浮点数。如果你想要文本左侧的图像，只需声明 float： left 为 .li-image 类。我不太确定在 <li> 属性中对齐文本的能力，但您也可以尝试垂直对齐和文本对齐，为 <li> 声明。

但是，我建议保留显示：块并在任何一种情况下浮动图像。这应该您在带有CSS的浏览器中的较大布局意图很困难。

Answer 2

为什么不将描述文本放在它自己的<li></li>标签中呢？似乎是解决您问题的简单方法。