2

在我网站的一个页面中，我有一个<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;
    }
4

2 回答 2

1

将每个声明<li>为块元素很好。我认为下一步就是为您的图像分配一个浮点数。如果您想要文本左侧的图像，只需声明 float: left 用于.li-image类。我不太确定将文本与<li>属性对齐的能力，但您也可以尝试为<li>.

但是，我建议在任何一种情况下都保留 display:block 并浮动图像。如果您在使用 CSS 的浏览器中进行更大的布局意图，那应该会很困难。

于 2012-08-12T02:41:45.610 回答
0

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

于 2012-08-12T02:31:36.837 回答