小白的问题：灰色的线条怎么样和PSD一样？还有价格也是！是我的代码哪里出问题了吗？

HTML:

<div class="index-menu">

      <div class="menu-tips">The Menu</div>

      <div class="public-container menu-list">

            <ul class="clearfloat">

            <li class="menu-item clearfloat">

                  <a class="title">

                        <h4>Voluptate cillum fugiat.</h4>

                        <p class="comment">Cheese, tomato, mushrooms, onions.</p>

                  </a>

                  <div class="line"></div>

                  <div class="price">$50</div>

            </li>

            <li class="menu-item clearfloat">

                  <a class="title">

                        <h4>Voluptate cillum fugiat.</h4>

                        <p class="comment">Cheese, tomato, mushrooms, onions.</p>

                  </a>

                  <div class="line"></div>

                 <div class="price">$50</div>

            </li>

            <li class="menu-item clearfloat">

                 <a class="title">

                         <h4>Voluptate cillum fugiat.</h4>

                        <p class="comment">Cheese, tomato, mushrooms, onions.</p>

                 </a>

                 <div class="line"></div>

                 <div class="price">$50</div>

            </li>

            <li class="menu-item clearfloat">

                <a class="title">

                         <h4>Voluptate cillum fugiat.</h4>

                         <p class="comment">Cheese, tomato, mushrooms, onions.</p>

               </a>

                <div class="line"></div>

                <div class="price">$50</div>

            </li>

            <li class="menu-item clearfloat">

                <a class="title">

                         <h4>Voluptate cillum fugiat.</h4>

                         <p class="comment">Cheese, tomato, mushrooms, onions.</p>

                </a>

                <div class="line"></div>

                <div class="price">$50</div>

            </li>

            <li class="menu-item clearfloat">

                <a class="title">

                         <h4>Voluptate cillum fugiat.</h4>

                         <p class="comment">Cheese, tomato, mushrooms, onions.</p>

                </a>

                <div class="line"></div>

                <div class="price">$50</div>

            </li>

            <li class="menu-item clearfloat">

                <a class="title">

                         <h4>Voluptate cillum fugiat.</h4>

                         <p class="comment">Cheese, tomato, mushrooms, onions.</p>

                </a>

                <div class="line"></div>

                <div class="price">$50</div>

            </li>

            <li class="menu-item clearfloat">

                         <a class="title">

                         <h4>Voluptate cillum fugiat.</h4>

                <p class="comment">Cheese, tomato, mushrooms, onions.</p>

                <div class="line"></div>

                <div class="price">$50</div>

            </li>

      </ul>

   </div>

   <a href=""class="menu-more-btn">load more <span></span><span class="icon"></span></a>

</div>

CSS:

/*菜单*/

.index-menu {

      position: relative;

      border-top:4px solid #f34949;

}

.index-menu .menu-tips {

      position: absolute;

      left: 50%;

      top:0;

      margin-left: -78px;

      width: 156px;

      height: 75px;

      text-align: center;

      line-height: 65px;

      color:#FFF;

      background: #F34949;

}

.index-menu .menu-tips:after {

      position: absolute;

      content: '';

      left: 0;

      bottom: 0;

      width: 0;

      height: 0;

      border-left: 78px solid transparent;

      border-right: 78px solid transparent;

      border-bottom: 10px solid #fff;

}

.index-menu .menu-list {

      margin-top: 150px;

      color: #555;

      overflow: hidden;

}

.index-menu .menu-list ul{

      width: 1160px;

}

.index-menu .menu-item{

      float: left;

      width: 520px;

      margin-right: 60px;

      margin-bottom: 56px;

}

.index-menu .menu-item .title .index-menu .menu-item .line {

      float: left;

}

.index-menu .menu-item .line {

      float: left;

}

.index-menu .menu-item .price {

      float: right;

}

.index-menu .menu-item .title {

      width: 230px;

      color: #555;

      overflow: hidden;

      white-space: nowrap;

      text-overflow: ellipsis;

}

.index-menu .menu-item .comment{

      margin-top: 4px;

      color: #b7b7b7;

      font-size: 12px;

}

.index-menu .menu-item .line {

      margin-top: 10px;

      width: 192px;

      border-top: 1px solid #e3e1e1;

}

.index-menu .menu-more-btn {

      margin: 0 auto;

      width: 114px;

      height: 32px;

      padding-left: 16px;

      border: 1px solid #d7d7d5;

      font-size: 14px;

      color: #b7b7b7;

}

.index-menu .menu-more-btn .icon {

      display: inline-block;

      margin-top: 14px;

      width: 11px;

      height: 7px;

      margin-left: 18px;

      margin-right: 18px;

      background: url("../images/index-btn-icon.png") no-repeat;

}