css - Chrome 的 ul CSS 布局问题

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;