仅应用CSS第一个元素？

Question

我创建这样的价格形式：

请按照我的代码点击full page以便于查看。

＆＃13;

＆＃13;

@import url('http://fonts.googleapis.com/css?family=Indie+Flower');
@import url('http://fonts.googleapis.com/css?family=Open+Sans:300,400,700');

body{
    background-color: rgb(237, 237, 237);
}

#pricing{
    width: 1340px;
/*     margin: 100px auto; */
    font-family: 'Open Sans', Helvetica;
}

.price_card{
    width: 295px;
    max-height: 173px;
    background: rgb(255, 255, 255);
    display: inline-table;
    top: 0;
    border: 1px solid green;
}
.price_card:not(:last-child){
    margin-right: 32px;
}
.header{
    color: rgb(255, 255, 255);
    background-color: rgb(113, 191, 68);
    font-size: 20px;
    font-weight: 100;
    height: 68px;
    display: block;
    text-align: center;
    padding: 28px 0 0px;
}
.price{
    width: 100%;
    font-size: 18px;
    font-weight: 300;
    display: block;
    text-align: center;
    padding: 10px 0 10px;
}
.name{
    width: 100%;
    font-size: 25px;
    font-weight: 100;
    display: block;
    text-align: center;
    padding: 0;
}
.features{
    list-style: none;
    text-align: center;
    color: rgb(255, 255, 255);
    background-color: rgb(144, 205, 109);
    margin: 0;
    padding: 0;
}
.features li{
    margin: 0 35px;
    padding: 20px 15px;
    width: 200px;
}
.features li:not(:last-child){
    border: 1px solid rgb(242, 242, 242);
    border-top: 0;
    border-left: 0;
    border-right: 0;
}
button{
    color: rgb(255, 255, 255);
    border: 0;
    border-radius: 0px;
    height: 42px;
    width: 177px;
    display: block;
    font-weight: 200;
    background-color: rgb(113, 191, 68);
    font-size: 18px;
    text-transform: uppercase;
    margin: 20px auto 35px;
}

＆＃13;

<div id="pricing">
  <div class="content">
    <h1>PRICE POPULAR CLOUD SERVICES</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione voluptates magnam nam eligendi, maiores quis, <br />ut perspiciatis odit eos accusamus modi sequi laborum veritatis quasi harum dolorem maxime, magni at!
    </p>
    <br />
  </div>
  <div class="price_card">
    <div class="header">
      <span class="name">Google Cloud</span>
    </div>
    <ul class="features">
      <span class="price">800 USD</span>
    </ul>
    <button>More info</button>
  </div>
  <div class="price_card">
    <div class="header">
      <span class="name">Amazon Cloud</span>
    </div>
    <ul class="features">
      <li class="price">1000 USD</li>
    </ul>
    <button>More info</button>
  </div>
  <div class="price_card">
    <div class="header">
      <span class="name">GO DADDY</span>
    </div>
    <ul class="features">
      <li class="price">1200 USD</li>
    </ul>
    <button>More info</button>
  </div>
  <div class="price_card">
    <div class="header">
      <span class="name">PLUS+ </span>
    </div>
    <ul class="features">
      <li class="price">2000 USD</li>
    </ul>
    <button>More info</button>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我有两个问题：

你可以看到：

1. 类的第一个元素：price_card是应用样式CSS。另一个是没有。

为什么我遇到这个问题？

1. 我没有使用自适应网站的经验。你能以800x400像素的分辨率为例吗？它自动缩放第一行中的两张卡和第二行中的两张卡？

Answer 1

您在其中一个块中使用了不同的HTML元素。

变化：

<div class="price_card">
<div class="header">
  <span class="name">Google Cloud</span>
</div>
<ul class="features">
  <span class="price">800 USD</span>
</ul>
<button>More info</button>

要：

<div class="price_card">
<div class="header">
  <span class="name">Google Cloud</span>
</div>
<ul class="features">
  <li class="price">800 USD</li>
</ul>
<button>More info</button>

你的无序列表有一个“span”作为第一个子元素，但应该有一个“li”作为第一个子元素。