<ol>有序列表失效,请问问题出在哪里?
问题解决与修正代码
问题根源
- HTML语法错误:标签属性间误用分号(比如
<div id="rcorners1";tabindex="0">和<ol type="a"; style="">),导致浏览器解析异常 - 列表项
<li>开头有大量冗余空格,干扰排版 - 缺少期望效果里的前置说明段落
- 容器和列表无基础样式控制,引发内容溢出
修正后的完整代码
<style> #rcorners1 { padding: 15px; /* 给容器加内边距,避免内容贴边 */ overflow: auto; /* 内容超出时自动显示滚动条,防止溢出容器 */ border: 1px solid #ccc; /* 可选:添加边框便于查看容器范围 */ } ol[type="a"] { margin-left: 20px; /* 控制列表缩进,避免超出容器 */ padding-left: 0; /* 重置浏览器默认内边距 */ } ol[type="a"] li { font-size: 2ex; /* 和其他段落保持一致字号 */ line-height: 1.5; /* 优化行高提升可读性 */ } p { font-size: 2ex; line-height: 1.5; } </style> <div id="rcorners1" tabindex="0"> <i style="color:black">玩家规则</i> <p>34. 仅参与对局的存活玩家可待在己方半场边界范围内。</p> <p>35. 存活玩家身体任何部位触碰边界线,即判定出局。</p> <p>36. 存活玩家身体任何部位触碰己方半场边界线外的地面、物体或人员,即判定出局。</p> <p>37. 被判定出局的存活玩家必须从最近的边界线位置及时离场。</p> <ol type="a"> <li>该玩家可将所持有的球传给己方任何存活玩家。</li> <li>该玩家不得故意触碰其他任何球。</li> <li>该玩家不得故意阻碍任何存活玩家或捡球人员。</li> <li>该玩家不得故意阻碍对方队伍抛出的任何活球。</li> </ol> <p>38. 已出局玩家必须按照出局顺序在指定的玩家返回区域排队。</p> </div>
关键调整说明
- 修复属性间的分号错误,改用空格分隔HTML属性
- 补充规则37的前置说明段落,匹配你期望的展示效果
- 移除列表项内的冗余前置空格,规范排版
- 添加CSS样式:给容器设置内边距和溢出控制,统一列表与段落的字号、行高,调整列表缩进确保内容不会超出容器范围
内容的提问来源于stack exchange,提问作者Lewis Lim Lewis Lin Yitzhe
相关产品推荐
相关产品推荐

