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>声明为块元素是很好的。我认为下一步是为您的图像指定一个浮点数。如果你想要文本左边的图像，只需为.li-image类声明float：left。我不太确定将文本与<li>属性对齐的能力，但您也可以尝试为<li>声明的vertical-align和text-align。

我建议保持显示：然后阻止和浮动图像。这应该是你在CSS浏览器中更大的布局意图。

Answer 2

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

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

2 个答案: