小测试

小测试-OK

by xiaobai

HTML

<div class="test">
  <ul>
    <li>
      <div class="clearfix">
        <p class="test-title">1.Shopping cart</p>
      </div>
      <div class="line"></div>
    </li>
    <li>
      <div class="clearfix">
        <p class="test-title">2.Shipping</p>
        <p class="test-des">Gooding cart</p>
      </div>
      <div class="line"></div>
    </li>
    <li>
      <div class="clearfix">
        <p class="test-title">3.CSS3 Gradient background</p>
        <p class="test-des">Gooding cart<br />
          CSS3 Gradient background</p>
      </div>
      <div class="line"></div>
    </li>
    <li>
      <div class="clearfix">
        <p class="test-title">4.Shopping cart</p>
        <p class="test-des">Gooding cart<br />
          CSS3 Gradient background,CSS3 Gradient background<br />
          CSS3 Gradient background</p>
      </div>
      <div class="line"></div>
    </li>
    <li>
      <div class="clearfix">
        <p class="test-title">5.Shopping cart</p>
        <p class="test-des">Gooding cart</p>
      </div>
      <div class="line"></div>
    </li>
  </ul>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}
body {
    font-family: Verdana, Geneva, sans-serif
}
.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1;
}
ul, li {
    list-style: none;
}
.test {
    width: 980px;
    margin: 0 auto;
}
.line {
    background:#069;
    height: 6px;
    line-height: 6px;
    overflow: hidden;
}
.test li {
    line-height: 20px;
}
.test p {
    display: inline-block;
    width: auto;
    vertical-align:bottom;
}
/*加这个为了兼容IE6,ie7*/
.test p {
    *display:inline;
    zoom: 1;
}

.test-title {
    padding: 0 6px;
    font-weight: bold;
    font-size: 16px;
    color: #900;
    background: #FFF;
    margin-bottom: -8px;
    position: relative;/*加这个为了兼容IE6,ie7*/
}
.test-des {
    font-size: 12px;
    color: #000;
    line-height: 16px;
}