仅应用CSS的第一个元素？

Question

I create price form like this:

Please click to full page at bellow my code to easy look.

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

 <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> 

I have two question:

You can see:

1. The first element of class: price_card is applied style CSS. Another is nothing.

Why I meet this problem?

2. I don't have experience with the responsive website. Can you example at a resolution about 800x400 pixel? It auto scale only two card in first rows and two cards in second rows?

Answer 1

You are using a different HTML element in one of your blocks.

Change:

<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>

To:

<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>

Your unordered list had a "span" as the first child element, but should have had an "li" as the first child element.