HTML简历开发：列表项符号超出body边框，padding-left无效求助

问题说明 #

制作HTML简历时，为body元素添加了边框，但列表项的符号始终显示在边框之外，尝试为列表项添加padding-left属性未解决问题，使用Firefox浏览器查看效果。

原因分析 #

这是代码问题，和浏览器无关，核心原因有三点：

• 所有<li>元素未包裹在<ul>或<ol>容器中，违反HTML规范，浏览器自动生成的匿名列表容器会导致布局行为不可控；
• 列表项默认list-style-position属性值为outside，项目符号会放在元素内容框之外，再加上body没有内边距，就会溢出到边框外；
• Skills部分的float属性导致列表布局混乱，进一步加剧显示异常。

解决方案 #

1. 规范列表结构：所有<li>必须放在<ul>或<ol>容器内，保证语义化和正常布局控制；
2. 添加内边距：给body设置左右内边距，让内容与边框之间预留空间，避免符号溢出；
3. 控制符号位置：给列表容器设置list-style-position: inside，将项目符号放在元素内容框内；
4. 优化横向列表布局：Skills部分去掉float，改用flex布局实现横向排列，避免布局坍塌。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Rohan Resume</title>
  <style>
    body {
      background-color: #e1d6e1;
      width: 80%;
      margin: auto;
      border: 1px solid black;
      padding: 0 20px 20px; /* 上下左右内边距，避免内容贴边框 */
    }
    .skills-list {
      list-style: none;
      padding: 0;
      display: flex; /* 用flex实现横向排列 */
      gap: 30px;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .normal-list {
      list-style-position: inside; /* 符号放在内容框内 */
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
  </style>
</head>

<body>
  <fieldset>
    <h1 style="text-align: center;margin-bottom: 10px;">Rohan Desai</h1>
    <h3 style="color: blue;text-align: center;">Web Developer</h3>
    <p style="display: inline-block;margin-right: 20px;margin-left: 20%;">9099030393</p>
    <p style="display: inline-block;margin: 20px;">desairohan1501@gmail.com</p>
    <p style="display: inline-block;"><a href="">LinkedIn</a></p>
  </fieldset>
  
  <h2>Qualifications</h2>
  <hr>
  <h3 style="display: inline-block;">B.Tech Electronics and Communication, 2024</h3>
  <h5 style="color: brown;margin: 0%;">Nirma University</h5>
  <hr>
  
  <h2>Skills</h2>
  <hr>
  <ul class="skills-list">
    <li><em>HTML</em></li>
    <li><em>CSS</em></li>
    <li><em>JavaScript</em></li>
    <li><em>Python</em></li>
    <li><em>C/C++</em></li>
    <li><em>SQL</em></li>
  </ul>
  <hr>
  
  <h2>Projects</h2>
  <hr>
  <ul class="normal-list">
    <li><b>Genre detection using ML</b></li>
    <p>Used Deep Learning model to detect genre of music using frequency and amplitude of the given audio</p>
    <li><b>Analysis of different Cache Replacement Policies using Python</b></li>
    <p>Analysis of FIFO, LIFO, LRU and LFU replacement policies using python for several test cases and charting their results to find the most optimal policy.</p>
  </ul>
  <hr>
  
  <h2>Experience</h2>
  <hr>
  <ul class="normal-list">
    <li>Web Development intern at CodeHub llp(Summer,2024)</li>
  </ul>
</body>

</html>

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