我有一个带有<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 --|
我知道我可以使用负左边距将图像移到左边,但我想避免使用它,因为它不会影响元素的宽度。任何建议都表示赞赏!
答案 0 :(得分:1)
你可以做的是一些css定位技巧:
ul {
position:relative;
}
ul img {
position:absolute;
left:0;
}
基本上这样做是将图片position
设置为absolute
(即任何地方),但将父UL
设置为relative
,意味着将所有子设置为{ {1}}会将absolute
的尺寸视为其视口。因此,在图片上设置UL
至left
会将其设置为0
答案 1 :(得分:0)
将图片包裹在DIV
中,为此margin-left
而不是图片设置为负DIV
,然后您就可以将图片的width
设置为100列表的百分比。