<ul> 项目符号的起始位置错误答案

【问题标题】：Wrong starting place for <ul> bullet<ul> 项目符号的起始位置错误
【发布时间】：2017-09-18 10:02:24
【问题描述】：

我对 ul 子弹的初始位置有疑问。问题如下：

我在浮动图片的（右）侧有一个 ul（两者都属于另一个 ul）。当我打开 html 文件或只是刷新时，项目符号与图片重叠。但是，如果我手动调整页面大小甚至“将其还原”，则项目符号会进入正确的位置并保持在正确的位置。因此，这个问题似乎只是一个“初始化”问题。

/* float left */
.leftFloat{
 clear: none;
 float: left;
 margin: .5em 1em;
}

/* clear the previous float */
.clearFloat{
clear: both;
}

/* additional space in lists*/
ul.addSpace{
position: relative;
left: 1em;  
padding-right: 1em;    
}

HTML

<li><p> text text text </p> 
    <img class="leftFloat" width="55%" src="PICTURE.jpg" />
    <p> text text text </p>
    <p> text text text </p> 
    <p> <ul class="addSpace">
        <li> text text text</li>
        <li> text text text</li>
        <li> text text text</li>
        </ul></p>   
    <p> text text text </p> 
</li>
<li class="clearFloat"> text text text </li>

刷新页面后项目符号的位置

调整页面大小后项目符号的正确位置

感谢您的帮助，Stefano

【问题讨论】：

你想要右边图片后面的所有东西吗？
不，只有 class="clearFloat" 之前的文本应该在右边。但这不是问题，它有效，我的问题是刷新后子弹位置错误（第一张图片）。
尝试在您的<ul> 上使用list-style-position: inside。这应该使子弹与它们的物品重新结合。

标签： html css html-lists floating

【解决方案1】：

您的 HTML 存在一些问题。首先这是一个非常不寻常的布局，其次，不允许将 ul 嵌套在 <p> 中。 ul 是流内容元素，p 不是。

所以我改变了一点你的结构。

对于图片右侧的解决方案（要有ul.addSpace），您需要：

因为img有float:left，所以你在ul上使用float:right
img 有width:55% 和margin:.5em 1em，所以你需要像width:calc(45% - 2em); 那样计算ul 的宽度
ul 具有 padding-left 并将其包含在其宽度中，请使用 box-sizing:border-box

这样做，你会得到下面的结果

.leftFloat{
 clear: none;
 float: left;
 margin: .5em 1em;
}

/* clear the previous float */
.clearFloat{
clear: both;
}

/* additional space in lists*/
ul.addSpace{
position: relative;
left: 0em;  
padding-right: 1em;   
float:right;
width:calc(45% - 2em);
box-sizing:border-box
}

<ul>


<li><p> text text text </p> 
    <img class="leftFloat" width="55%" src="http://via.placeholder.com/350x150" />
    <p> text text text </p>
    <p> text text text </p> 
    <ul class="addSpace">
        <li> text text text</li>
        <li> text text text</li>
        <li> text text text</li>
    </ul>
    <p> text text text </p> 
</li>
<li class="clearFloat"> text text text </li>
</ul>

【讨论】：