Html 通常在li内格式化文本（列表项）

在我网站的一个页面中，我有一个

设置。在

中的每个
中，都有一个图像和一些文本。当我先放入图像，然后尝试放入文本时，文本被压下，无法正确格式化。我试图向图像中添加
垂直对齐：文本顶部
，但这只是将文本推到顶部，并且在添加更多文本时不允许向下移动

JSFiddle-

HTML

为什么不把描述文本放在它自己的标签中呢？似乎是解决问题的简单方法。
最好将每个
声明为块元素。我想下一步就是给你的图像分配一个浮动。若您希望图像位于文本的左侧，只需为
.li image
类声明float:left。我不太确定使用
属性对齐文本的能力，但您也可以尝试使用为
声明的垂直对齐和文本对齐

我建议保留显示：但是，无论哪种情况，都可以阻止和浮动图像。在使用CSS的浏览器中，这应该很难实现更大的布局意图。
默认情况下，所有
元素都是块。除非我们不知道还有其他相互冲突的任务，否则这条线不会起作用。除此之外，
float:left
似乎是所有需要的。太棒了，float:left在li图像上工作。我真的很感谢你的帮助。那会有不同的含义。图像和描述是一个实体。在各自的
li
中，它们都会失去连接。不要忘记在
img
上添加并填写
alt
属性。
<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>

#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;
    }