我觉得应该是一个相对简单的约束,我似乎无法找到解决方案.我正在尝试构建一组WYSIWYG组件样式,这些样式将灵活地一起工作,并且无法获得项目符号/编号列表的组合,以便可预测地围绕浮动数字进行包装而不会丢失缩进或导致重叠内容:
限制:
这是具有"float:left"设置的内容右侧列表的默认样式.子弹与浮动内容重叠,并且压痕丢失.
.pull-left {
background: #3333ff;
color: white;
float: left;
width: 50%;
height: 80px;
}<div class="pull-left">Floating content</div>
<ul>
<li>First Item
<ul>
<li>Nested Item</li>
<li>Nested Item</li>
</ul>
</li>
<li>Second Item</li>
<li>Third Item
<ul>
<li>Nested Item</li>
<li>Nested Item</li>
</ul>
</li>
</ul>在元素上设置值overflow(即overflow: hidden)可以<ul>修复项目符号格式+缩进,但不允许内容换行:
.pull-left {
background: #3333ff;
color: white;
float: left;
width: 50%;
height: 80px;
}
ul {
overflow: hidden;
}<div class="pull-left">Floating content</div>
<ul>
<li>First Item
<ul>
<li>Nested Item</li>
<li>Nested …