ul Chrome浏览器布局问题

Question

我使用bootstrap响应式布局，我有一个无序列表在Firefox，Opera，IE浏览器中看起来很好，除了Chrome浏览器（版本28）。在Chrome中，它在图片中显示如下：

这是CSS样式：

ul {
   margin: 20px;

   li {
      border-bottom: 1px solid #E6E6E6;

      div {                             // the icon
          color: #0085AF;
          display: inline-block;
          font-size: 12px;
          width: 10%;
      }

      p {                               // the text
         display: inline-block;
         float: right;
         margin-bottom: 0;
         width: 89%;

         a {
          font-family: 'Open Sans',sans-serif;
          margin-left: 10px;
         }
      }
   }
}

ul li的重置样式是：

ul, li {
       margin: 0;
       padding: 0;
       border: 0;
       font-size: 100%;
       font: inherit;
       vertical-align: baseline;
}

我无法弄清楚在不破坏当前布局的情况下我应该更改哪个设置，文本应该与图标对齐，并且在边框线上方，而不是坐在它上面！为什么这样做？

Answer 1

使用display: block;而不是display: inline-block;