看看我的例子,第二个列表样式完全关闭,因为它是浮动元素的旁边(除非你添加inline-block
样式)。
问题是我无法知道浮动元素的旁边何时它必须在没有它的情况下正常工作(即必须是block
)。
如何修复第二个列表样式?
它是丰富的文本编辑器内容,我不能将图像和第二个列表包装成div并使用flexbox或其他东西,它必须自然流动。
编辑:甚至浏览器也很困惑 - 如果你按“运行”足够多次,公告有时会出现在文本旁边,有时会出现在左边的图像上方。
.wrapper {
padding: 20px;
border: 2px dashed #ec6161;
}
.wrapper::after {
content: "";
clear: both;
display: table;
}
ul {
/* display: inline-block; */
}
img {
margin-right: 20px;
max-width: 50%;
float: left;
}
<div class="wrapper">
<ul>
<li>
<div>Item 1</div>
<ul>
<li>
<div>Subitem 1</div>
</li>
<li>
<div>Subitem 2</div>
</li>
</ul>
</li>
<li>
<div>Item 2</div>
</li>
</ul>
<img src="http://www.pethealthnetwork.com/sites/default/files/content/images/how-introduce-new-cat-home-2-179981446.jpg" />
<ul>
<li>
<div>Item 1</div>
<ul>
<li>
<div>Subitem 1</div>
</li>
<li>
<div>Subitem 2</div>
</li>
</ul>
</li>
<li>
<div>Item 2</div>
</li>
</ul>
</div>
你需要清除浮子。使用clear:both
来UL
。
这是更新的小提琴:
.wrapper {
padding: 20px;
border: 2px dashed #ec6161;
}
.wrapper::after {
content: "";
clear: both;
display: table;
}
ul {
/* display: inline-block; */
clear:both;
}
img {
margin-right: 20px;
max-width: 50%;
float: left;
}
<div class="wrapper">
<ul>
<li>
<div>Item 1</div>
<ul>
<li>
<div>Subitem 1</div>
</li>
<li>
<div>Subitem 2</div>
</li>
</ul>
</li>
<li>
<div>Item 2</div>
</li>
</ul>
<img src="http://www.pethealthnetwork.com/sites/default/files/content/images/how-introduce-new-cat-home-2-179981446.jpg" />
<ul>
<li>
<div>Item 1</div>
<ul>
<li>
<div>Subitem 1</div>
</li>
<li>
<div>Subitem 2</div>
</li>
</ul>
</li>
<li>
<div>Item 2</div>
</li>
</ul>
</div>