在我网站的一个页面中,我有一个 <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;
}
最佳答案
很好,您声明每个 <li>
作为 block 元素。我认为下一步就是为您的图像分配一个 float 。如果您想要文本左侧的图像,只需声明 float: left for the .li-image
类(class)。我不太确定将文本与 <li>
对齐的能力属性,但您也可以尝试垂直对齐和文本对齐,为 <li>
声明.
不过,我建议在任何一种情况下都保留 display:block 和 float 图像。这应该会使您在使用 CSS 的浏览器中更大的布局意图变得困难。
关于html - 通常在 li 内格式化文本(列表项),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11919249/