2

<ol>我有一个包含<li>元素的有序列表。我对列表当前的呈现方式感到满意，但我想让 ' 中的<img>元素<li>不遵循我为<li>元素设置的缩进 CSS 样式规则。<img>当涉及到一个元素时，有什么方法可以打破缩进的流动。

所以我有类似的东西：

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

   |-- IMAGE SPANS WIDTH OF INDENT --|

我想要的是这样的：

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

|-- IMAGES SPANS WIDTH OF <OL> -------|

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

4

2 回答 2

1

您可以做的是一些 css 定位技巧：

ul {
position:relative;
}

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

基本上，它所做的是将图像设置position为absolute（即，任何地方），但将父级设置UL为relative，这意味着任何设置为的子级absolute都会将UL' 的尺寸视为他们的视口。因此在图像上设置left为0将其设置为图像的最左侧UL

于 2013-04-08T15:25:16.503 回答
0

将图像包装在 a中，为此DIV设置负数而不是图像，然后您将能够设置图像等于列表的 100%。margin-leftDIVwidth

于 2013-04-08T15:30:10.327 回答