浮动项目旁边的自定义 li 样式

Question

我有自定义样式的列表项，可以越过一行，需要保持一致。在下面的代码片段中，第一个列表工作正常。

但是由于绝对定位，第二个片段项位于图像的左侧。有什么方法可以将项目放置在浮动元素附近，使它们不会越过它？

内容来自ckeditor，所以我所知道的是他们可以输入一个浮动的左图，并且可以用任何东西包围它

.figure.figure-left {
display: table;
float: left;
margin: 0 20px 10px 0;
}
ul:not(.cke_panel_list) {
list-style: none!important;
padding-left: 16px;
position: relative;
/* clear: both; */
}
ul:not(.cke_panel_list) li:before {
font-family: FontAwesome;
content: 'f10c'!important;
color: #009EE0;
font-size: 8px;
vertical-align: top;
position: absolute;
left: 0;
}
.figure {
clear: both;
margin: 0;
padding: 0;
}
.figure img.img-responsive {
display: inline-block;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
<h3>Good list. Atta boy</h3>
<ul class="arrow-list">
<li>List Item</li>
<li>List Item going over one line and wraps around and stays nicely aligned etc etc etc fdfdsfsafsafdsa dsf ds fdsf ds fds fds fs</li>
<li>List Item</li>
<li>List Item</li>
</ul>
<div class="figure figure-left"><img alt="" class="img img-responsive" width=200 src="https://cdn.sparesinmotion.com/sites/default/files/test-product-test.png">
</div>
<h3>Bad list, bold!</h3>
<ul class="arrow-list">
<li>List Item</li>
<li>List Item going over one line and wraps around and stays nicely aligned etc etc etc List Item going over one line and wraps around and stays nicely aligned etc etc etc List Item going over one line and wraps around and stays nicely aligned etc etc etc List Item going over one line and wraps around and stays nicely aligned etc etc etc</li>
<li>List Item</li>
<li>List Item</li>
</ul>
<h3>And some more stuff, who knows what the editors might add?</h3>
</div>

Answer 1

您只需在列表中overflow: auto即可轻松清除浮点数：

.figure.figure-left {
display: table;
float: left;
margin: 0 20px 10px 0;
}
ul:not(.cke_panel_list) {
list-style: none!important;
padding-left: 16px;
position: relative;
/* clear: both; */
}
ul.arrow-list {overflow: auto;}
ul:not(.cke_panel_list) li:before {
font-family: FontAwesome;
content: 'f10c'!important;
color: #009EE0;
font-size: 8px;
vertical-align: top;
position: absolute;
left: 0;
}
.figure {
clear: both;
margin: 0;
padding: 0;
}
.figure img.img-responsive {
display: inline-block;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
<h3>Good list. Atta boy</h3>
<ul class="arrow-list">
<li>List Item</li>
<li>List Item going over one line and wraps around and stays nicely aligned etc etc etc fdfdsfsafsafdsa dsf ds fdsf ds fds fds fs</li>
<li>List Item</li>
<li>List Item</li>
</ul>
<div class="figure figure-left"><img alt="" class="img img-responsive" width=200 src="https://cdn.sparesinmotion.com/sites/default/files/test-product-test.png">
</div>
<h3>Bad list, bold!</h3>
<ul class="arrow-list">
<li>List Item</li>
<li>List Item going over one line and wraps around and stays nicely aligned etc etc etc List Item going over one line and wraps around and stays nicely aligned etc etc etc List Item going over one line and wraps around and stays nicely aligned etc etc etc List Item going over one line and wraps around and stays nicely aligned etc etc etc</li>
<li>List Item</li>
<li>List Item</li>
</ul>
<h3>And some more stuff, who knows what the editors might add?</h3>
</div>