2回答

• 

  kking_xyz

  2016-08-07 10:43:31

  已采纳

  建议：以后写CSS的时候，记着在开头先清除默认样式：* { margin:0; padding:0; }

  你这个在开头清除默认样式后，ul的margin值就不需要设置了，然后给ul设置一个行高。

  下面这段CSS给你参考一下
  

  <style type="text/css">
  *{margin:0; padding:0;}
  .topList{
      width:300px;
      height:180px;
      border:1px solid #e8e8e8;
      margin:0 auto;
  }
  .topList ul{
      list-style-type:none;
      padding:5px;
  }
  .topList ul li {
      height:28px;
  }
  .topList ul li a{
      text-decoration:none;
      padding-left:px;
      font-size:12px;
      color:#666;
  }
  .topList ul li em{
      display:block;
      float:left;
      width:20px;
      height:16px;
      line-height:16px;
      font-size:14px;
      text-align:center;
      font-style:normal;
      color:#333;
      background:url(http://img.mukewang.com/53cf0fa20001d3dc00200032.jpg) no-repeat 0 -16px;
  }
  .topList .top em{
      color:#fff;
      background:url(http://img.mukewang.com/53cf0fa20001d3dc00200032.jpg) no-repeat;
  }
  </style>

  
  

  1 2

  霍丶

  恩恩，我开头加上请出样式，确实解决了 谢谢！

  2016-08-07 12:22:42

  共 1 条回复 >

• 

  慕粉4282285

  2016-11-04 14:53:33

  我没有清楚默认样式（实际上是我一开始忘了- -），然后根据自己的想法写了一段，效果基本相同，可以参考下

  <style type="text/css">
  
  .topList {
      width: 300px;
      height: 180px;
      border: 1px solid #E8E8E8;
      font-size: 13px;
      line-height: 17px;
  }
  
  ul {
      list-style-type: none;
      padding: 5px;
      margin-top: -10px;
  }
  
  ul li a {
      display: bold;
      text-decoration: none;
      color: #333;
  }
  
  ul p {
      letter-spacing: -1px;
  }
  
  ul em {
      display: block;
      float: left;
      width: 20px;
      height: 16px;
      font-style: normal;
      background: url(http://img.mukewang.com/53cf0fa20001d3dc00200032.jpg) no-repeat;
      text-align: center;
      color: white;
      font-weight: bold;
  }
  
  .gray {
      background: url(http://img.mukewang.com/53cf0fa20001d3dc00200032.jpg) no-repeat;
      background-position: bottom;
      color: #333;
  }
  
  </style>

  
  

  0 0