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

Question

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

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

/* 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 有一些问题。首先，这是一个非常不寻常的布局，其次，不允许将 ul 嵌套在 <p> 中。 ul 是流内容元素，p 不是。

所以我稍微改变了你的结构。

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

因为 img 有 float:left，你在 ul

float:right

img 有 width:55% 和 margin:.5em 1em ，所以你需要像这样计算 ul 的宽度 width:calc(45% - 2em);
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>

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

Wrong starting place for <ul> bullet

html

css

floating

html-lists