开发简历网站时如何实现技能栏左对齐并缩小组件尺寸

核心失效原因 #

• 容器规则不匹配：.skills 类设置了固定width: 500px + 水平自动外边距margin: 60px auto，会强制整个技能板块在页面水平居中，且固定宽度过大，既无法实现左对齐，也不符合缩小组件尺寸的要求。
• HTML结构不规范：列表项<li>直接嵌套在<div class="skills">下，没有父级<ul>/<ol>包裹，通配符的list-style: none规则无法正常生效，会导致列表排版错位。
• 组件间距过大：.skills li 设置的margin: 20px 0 单条技能项上下间距过宽，整体组件松散，尺寸偏大。

具体修改实现 #

1. HTML结构调整 #

修正嵌套逻辑，补充语义化列表包裹层：

<div class="skills">
  <h1>Skills</h1>
  <ul class="skills-list">
    <li>
      <h3>C++</h3>
      <span class="bar"><span class="c"></span></span>
    </li>
    <li>
      <h3>Microsoft Excel</h3>
      <span class="bar"><span class="excel"></span></span>
    </li>
    <li>
      <h3>Microsoft Word</h3>
      <span class="bar"><span class="word"></span></span>
    </li>
    <li>
      <h3>Python</h3>
      <span class="bar"><span class="py"></span></span>
    </li>
    <li>
      <h3>HTML</h3>
      <span class="bar"><span class="html"></span></span>
    </li>
  </ul>
</div>

2. CSS样式调整 #

对应修改对齐规则、尺寸参数，实现左对齐和紧凑尺寸效果：

* {
  font-family: sans-serif;
  list-style: none;
  padding: 0;
  margin: 0; /* 补充清除默认外边距，避免排版偏移 */
  box-sizing: border-box;
}

body {
  background: burlywood;
  padding: 2rem; /* 给页面加统一内边距，避免内容贴边 */
}

.skills {
  /* 将原500px固定宽度缩小到280px，适配紧凑尺寸要求 */
  width: 280px;
  /* 将原水平auto居中规则改为仅保留顶部外边距，实现板块整体左对齐 */
  margin: 40px 0 0 0;
  color: gray;
}

.skills h1 {
  font-size: 1.3rem;
  margin-bottom: 1.2rem;
}

/* 缩小单条技能项上下间距，压缩整体组件尺寸 */
.skills li {
  margin: 12px 0;
}

.skills li h3 {
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.bar {
  background: gray;
  display: block;
  /* 将原2px的进度条高度调整为6px，视觉展示更清晰 */
  height: 6px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 3px; /* 圆角优化观感 */
  overflow: hidden;
  box-shadow: 0 0 5px rgb(43, 41, 41);
}

.bar span {
  height: 100%; /* 适配外层bar高度，避免进度条内嵌错位 */
  float: left;
  background: cyan;
}

/* 保留原有技能进度宽度动画配置 */
.py {
  width: 20%;
  animation: py 2s;
}

.word {
  width: 50%;
  animation: word 2s;
}

.excel {
  width: 70%;
  animation: excel 2s;
}

.c {
  width: 59%;
  animation: c 2s;
}

.html {
  width: 40%;
  animation: html 2s;
}

调整后效果 #

• 整个技能板块会依托页面统一内边距靠左对齐，不会被强制水平居中。
• 板块整体宽度从原500px压缩到280px，单条技能项间距缩小，整体组件尺寸更紧凑。
• 进度条宽度会自动适配缩小后的容器宽度，依然保持从左到右填充的动画逻辑，不会出现对齐偏移。

注：如果需要调整对齐的具体位置，只要修改.skills类的左边距参数即可，无需改动其他布局规则。

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