Div仅设置display为list-item才显示，高度显示为0问题求助

问题核心原因拆解 #

• 无效背景色值：你写的background: #ffff;不符合CSS十六进制颜色规范（需3位或6位字符），浏览器无法识别该颜色，导致元素即使存在也因无背景而不可见。应改为#fff（简写）或#ffffff。
• 负边距引发遮挡：margin-top: -10px;会让div向上偏移10px，若上方有其他带背景的元素/父容器，会直接将其完全覆盖。设置display: list-item时，元素会生成列表标记（::marker），改变了布局上下文，避免被完全遮挡，所以能显示出来。
• 高度显示为0的可能因素：
  • 若父元素设置了overflow: hidden，元素被负边距移到父容器可视区域外，会被裁剪，计算高度为0；
  • 可能存在其他CSS规则覆盖了height: 10px，比如继承了height: 0，可通过浏览器开发者工具查看元素的计算样式确认。

修复后的样式代码 #

div {
    width: 110px;
    height: 10px;
    background: #fff; /* 修正颜色值 */
    border-radius: 30px;
    margin-top: -10px;
    /* 可选：添加相对定位提升层级，避免被遮挡 */
    position: relative;
    z-index: 1;
}

补充说明 #

display: list-item本身不是解决问题的正确方式，只是巧合改变了布局让元素可见。核心问题还是背景色错误和负边距遮挡，修正这两点后，使用display: block（div默认值）就能正常显示。

内容的提问来源于stack exchange，提问作者vonsii