freeCodeCamp产品着陆页CSS布局问题：图标对齐与li溢出求助

问题1：图标固定左侧，功能/价格内容居中 #

原布局通过硬编码margin-left:27%偏移容器，适配性差。修改方案：

1. 给Features和Price的外层section添加统一类名feature-section，实现整体居中
2. 移除#Features和#Price的margin-left，用flex布局让图标与内容垂直对齐
3. 固定图标容器宽度，确保图标始终在左侧，内容区域自适应

关键修改代码：

.feature-section {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 5% 0;
}

#Features, #Price {
  display: flex;
  align-items: center;
  width: 80%; /* 控制内容宽度避免过宽 */
}

#green, #cheap {
  width: 80px; /* 固定图标容器宽度 */
  flex-shrink: 0; /* 防止图标被压缩 */
}

#logo-green {
  width: 50px;
  height: auto;
  margin-right: 30px;
}

对应HTML修改：

<!-- features -->
<section class="feature-section">
  <div id="Features">
    <div id="green">
      <img id="logo-green" src="img/294432.png" alt="可再生能源图标">
    </div>
    <div class="feature">
      <h2>Only from renovable energy</h2>
      <p>Coming from water and earth termal energy</p>
    </div>
  </div>
</section>
<!-- price -->
<section class="feature-section">
  <div id="Price">
    <div id="cheap">
      <img id="logo-green" src="img/low-price.png" alt="低价图标">
    </div>
    <div class="price">
      <h2>Prices you have never seen</h2>
      <p>With our funding system you might get some solar panels</p>
      <p>and who knows... we might pay you your energy.</p>
    </div>
  </div>
</section>

问题2：li元素溢出容器 #

全局li的margin:40px过大，且价格卡片内的li未设置换行规则，导致溢出。修改方案：

1. 区分全局导航li和卡片内li的样式，避免全局样式污染
2. 给卡片内li添加换行属性，确保文本自动换行
3. 调整卡片内ul/li的边距，适配容器大小

关键修改代码：

/* 全局导航li样式 */
nav li {
  margin: 40px;
}

/* 价格卡片内的li样式 */
.class li {
  margin: 5px 0; /* 替换过大的全局margin */
  word-wrap: break-word; /* 强制文本换行 */
  padding: 0 10px; /* 内边距避免贴边 */
  text-align: left;
}

.class ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 15px;
}

完整修改后代码 #

CSS代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-family: 'Montserrat', sans-serif;
}

#logo {
  position: absolute;
  width: 25%;
  left: 0;
  height: auto;
  image-resolution: 100%;
}

header {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}

.navspace {
  display: flex;
  justify-content: end;
  position: relative;
  right: -15%;
}

nav {
  position: relative; /* 修复原代码拼写错误：positio → position */
}

nav ul {
  display: flex;
  list-style: none;
}

nav li {
  margin: 40px;
}

.product {
  position: absolute;
  top: 15%;
}

#leads {
  width: 100vw;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.title {
  padding: 2%;
}

.feature-section {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 5% 0;
}

#Features, #Price {
  display: flex;
  align-items: center;
  width: 80%;
}

#green, #cheap {
  width: 80px;
  flex-shrink: 0;
}

#logo-green {
  width: 50px;
  height: auto;
  margin-right: 30px;
}

.price {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.pricelist {
  width: 100%;
  max-height: 400px;
  text-align: center;
  display: flex;
  justify-content: center;
  position: relative; /* 替换absolute避免布局混乱 */
  margin-top: 50px;
}

.class {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  margin: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.class>h1 {
  width: 100%;
  height: 10%;
  background-color: blanchedalmond;
  padding: 2%;
  font-size: large;
  display: flex;
  align-items: center;
  justify-content: center;
}

.class>h2 {
  margin: 5% 0 5% 0;
}

.class ul {
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  padding: 0 15px;
  width: 100%;
}

.class li {
  margin: 5px 0;
  word-wrap: break-word;
  padding: 0 10px;
  text-align: left;
}

HTML代码 #

<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>

<!-- tabella nav -->
<header>
  <div>
    <img id="logo" src="img/LIGHTSPEED.png" alt="LIGHTSPEED logo" />
  </div>
  <!-- bhr -->
  <div class="navspace">
    <nav id="nav-link">
      <ul>
        <li>Features</li>
        <li>Price</li>
        <li>Contacts</li>
      </ul>
    </nav>
  </div>
</header>
<main class="product">
  <!-- form -->
  <section id="leads">
    <h2 class="title">Most efficient way to light your life</h2>
    <form action="">
      <input class="email" type="email" required placeholder="Enter your email" columns="10">
      <input class="submit" type="submit" value="Get Shocked">
    </form>
  </section>
  <!-- features -->
  <section class="feature-section">
    <div id="Features">
      <div id="green">
        <img id="logo-green" src="img/294432.png" alt="可再生能源图标">
      </div>
      <div class="feature">
        <h2>Only from renovable energy</h2>
        <p>Coming from water and earth termal energy</p>
      </div>
    </div>
  </section>
  <!-- price -->
  <section class="feature-section">
    <div id="Price">
      <div id="cheap">
        <img id="logo-green" src="img/low-price.png" alt="低价图标">
      </div>
      <div class="price">
        <h2>Prices you have never seen</h2>
        <p>With our funding system you might get some solar panels</p>
        <p>and who knows... we might pay you your energy.</p>
      </div>
    </div>
  </section>
  <div class="pricelist">
    <div class="class" id="base">
      <h1>BASE LEVEL</h1>
      <h2>49€</h2>
      <ul>
        <li>Standart power transmission</li>
        <li>Change power output by your personal profile</li>
        <li>Client Support 10am-20am</li>
      </ul>
    </div>
    <div class="class" id="medium">
      <h1>MEDIUM LEVEL</h1>
      <h2>59€</h2>
    </div>
    <div class="class" id="pika">
      <h1>PIKACHU LEVEL</h1>
      <h2>149€</h2>
    </div>
  </div>
</main>

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