<ul>子弹错误的起始位置

Question

我对 ul 项目符号的初始位置有疑问。问题如下：

我在浮动图片的（右侧）有一个 ul （两者都属于另一个 ul ）。当我打开html文件或只是刷新子弹与图片重叠。但是，如果我手动调整页面大小，甚至＆＃34;将其恢复为＆＃34;子弹走在正确的位置并保持在正确的位置。因此问题似乎只是一个初始化＆＃34;问题

/* 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

Answer 1

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

所以我改变了你的结构。

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

1. 因为img有float：left，你在float:right
上使用ul
2. img有width:55%和margin:.5em 1em，因此你需要计算ul的宽度，如width:calc(45% - 2em);
3. 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>