是否可以让<li>中的<img/>为“非缩进”?</li>

时间:2013-04-08 15:22:07

标签: html css css3

我有一个带有<ol>元素的有序列表<li>。我对列表当前呈现的方式感到满意,但我想让<img>中的<li>元素不遵循我设置为{{的缩进CSS样式规则1}}元素。有什么方法可以在缩进<li>元素时打破缩进的流程。

所以我有类似的东西:

<img>

我想要的是:

*  List Item 1 description that is two 
   lines long.  Lorem ipsum et dolor.

   |-- IMAGE SPANS WIDTH OF INDENT --|

我知道我可以使用负左边距将图像移到左边,但我想避免使用它,因为它不会影响元素的宽度。任何建议都表示赞赏!

2 个答案:

答案 0 :(得分:1)

你可以做的是一些css定位技巧:

ul {
position:relative;
}

ul img {
position:absolute;
left:0;
}

基本上这样做是将图片position设置为absolute(即任何地方),但将父UL设置为relative,意味着将所有子设置为{ {1}}会将absolute的尺寸视为其视口。因此,在图片上设置ULleft会将其设置为0

的最左侧部分

答案 1 :(得分:0)

将图片包裹在DIV中,为此margin-left而不是图片设置为负DIV,然后您就可以将图片的width设置为100列表的百分比。