对齐css / fcc项目的问题

Question

我正在尝试构建一个产品登陆页面，作为freeCodeCamp的证书项目。

我不知道如何修复左边的图标，同时将功能和价格固定到中心。我也不明白为什么我的li项目会溢出到它们的容器中。

我试过了所有的溢出标签和包装标签，但我无法解决。

​

* {
  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 {
  justify-content: end;
  position: relative;
  right: -15%;
}

nav {
  positio: relative;
}

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

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%;
}

#logo-green {
  width: 5vw;
  height: auto;
  margin-right: 5vw;
}

#Features {
  margin-left: 27%;
  display: flex;
  align-items: left;
  justify-content: left;
  text-align: left;
  padding: 5%;
}

#Price {
  display: flex;
  align-items: center;
  justify-content: left;
  text-align: center;
  padding: 3%;
  margin-left: 27%;
}

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

.pricelist {
  width: 100%;
  max-height: 400px;
  text-align: center;
  position: absolute;
  display: inline-flex;
  justify-content: center;
}

.class {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  margin: 20px;
}

.class>h1 {
  width: 100%;
  height: 10%;
  background-color: blanchedalmond;
  padding: 2%;
  font-size: large;
}

#medium,
#pika,
#base {
  display: flex;
  flex-direction: column;
}

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

.class>ul {
  display: grid;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
}

.class>li {
  position: relative;
}

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

<!-- tabella nav -->
<header>
  <div>
    <img id="logo" src="img/LIGHTSPEED.png" alt="" />
  </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>
    <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>
    <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>

​

Answer 1

一些事情一开始，我已经添加了一些评论到你的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 {
  justify-content: end;
  position: relative;
  right: -15%;
}

nav {
  position: relative; /* <- mispelled positio[n] */
}

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

li {
  margin: 40px;
}

.product {
  position: absolute; /* I hate position absolute. Hate it deeply. Basically refuse to use it. It never works the way I want it to. More on this in response below */
  top: 15%;
}

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

.title {
  padding: 2%;
}

#logo-green {
  width: 5vw;
  height: auto;
  margin-right: 5vw;
}

#Features {
  margin-left: 27%;
  display: flex;
  align-items: left;
  justify-content: left;
  text-align: left;
  padding: 5%;
}

#Price { /* be careful, classes and Ids are case sensitive*/
  display: flex;
  align-items: center;
  justify-content: left;
  text-align: center;
  padding: 3%;
  margin-left: 27%;
}

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

.pricelist {
  width: 100%;
  max-height: 400px;
  text-align: center;
  position: absolute;
  display: inline-flex; /* technically, unless this object has a sibling, making it inline-flex while it is position: absolute; won't really change anything... though it could in unexpected ways. More below*/
  justify-content: center; 
}

.class {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  margin: 20px;
}

.class>h1 {
  width: 100%;
  height: 10%;
  background-color: blanchedalmond;
  padding: 2%;
  font-size: large;
}

#medium,
#pika,
#base {
  display: flex;
  flex-direction: column;
}

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

.class>ul {
  display: grid;
  display: flex;/* display grid is just being overridden by display flex here, so there's no point in keeping it */
  justify-content: center;
  flex-direction: column;
  gap: 2px;
}

.class>li {
  position: relative;
}

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

<!-- tabella nav -->
<header>
  <div>
    <img id="logo" src="img/LIGHTSPEED.png" alt="" />
  </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>
    <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>
    <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>

​

首先，虽然这是个人选择，也是现在大多数人使用CSS的方式:我讨厌职位:绝对。它从来不像你所希望的那样，很难让它做出反应，现在有更好的方法来做它。绝对值的问题是，它同时将一个对象从文档的标准流中分离出来，但它也消除了对象影响文档中其他对象的能力。这意味着带有位置的div :绝对将不再向下推它的兄弟对象(它旁边的东西)，在父对象中保持空间(持有它的东西会表现得好像它里面什么都没有)。虽然比较复杂，但是使用网格将对象从正常的文档流中分离出来是更可预测的。

让我们看一看没有位置的代码:绝对值：

https://jsfiddle.net/slingtruchoice/sye5wbmu/

你的盒子外面已经没有东西坏了。

你最好的选择是使用边距和显示:块。请记住，内联项目不会在文档中保留自己的行，它们允许其他内联项在同一行中放置在它们旁边，这样它们就不会以同样的方式受到边距和填充的影响。显示:内联块修复了其中的一些问题，但不是所有问题。

我把这个当做海报在我办公室里。我已经做了十年了，每天都在使用它：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

如果一个项目从容器中溢出，那是因为容器没有意识到它需要受子容器大小的影响。这要么意味着父母有一个固定的尺寸，可以压倒孩子想让父母变大的愿望(就像我的老师常说的，一个孕妇穿着紧身胸衣……)如此怪异的形象)。

这也可能意味着孩子的大小不会影响周围的事物，比如位置:绝对或显示:内联项目，表现得很奇怪。如果在父对象上显示:flex和flex-wrap: you，但子对象的大小被设置为大于父对象，则它们将溢出。

Answer 2

我知道你说的是什么图标，如果能澄清这个问题，我很乐意帮助你。现在来看看为什么您的li条目会溢出到它们的容器中。

在第94和103号行的CSS中，您设置了max-height: 400px;和height: 300px;，因为您的li项已经溢出。

一种方法是修复这个bye，移除fix高度，并设置使父容器根据其子元素自动增长的值height: auto;，或者您可以给您的ul元素一个类或ID，然后将overflow-y: scroll;设置为该ID或类。

Answer 3

这是freecodecamp用来设计带有图标的中间部分的代码。

​

.grid {
     display: flex;
}
 #features .icon {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 125px;
     width: 20vw;
     color: darkorange;
}
 #features .desc {
     display: flex;
     flex-direction: column;
     justify-content: center;
     height: 125px;
     width: 80vw;
     padding: 5px;
}

<!-- Wrapper -->
<div class="grid">
  <!-- Icon -->
  <div class="icon">
    <i class="fa fa-3x fa-fire"></i>
  </div>
  <!-- /Icon -->
  <!-- Description -->
  <div class="desc">
    <h2>Premium Materials</h2>
    <p> Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase. </p>
  </div>
  <!-- /Description -->
</div>
<!-- /Wrapper -->

​

现在让我解释一下这里发生了什么。具有类名grid的grid是icon和desc的父元素，因此它们将grid的显示设置为display: flex;，并给出两个子元素fix宽度width: 20vw;和width: 80vw;

我想补充一点，如果您对任何元素都使用position: absolute;，那么设置它的父元素为position: relative;是个好主意，这将使使用位置变得更加容易。