Question

为什么我的图标和文字不在同一行，虽然我已将它们放在li里面display-line

<div class="user">
  <ul>
   <li>         
     <i class="fa fa-2x fa-border fa-user"></i>              
     some text             
    </li>
 </ul>
</div>

我需要为我的图标提供5px的余量，因此将其设为position: absolute因为它现在没有放置inline。

为什么我的图标和文字与图标顶部的margin of 5px不在同一行。

以下是小提琴。

http://codepen.io/anon/pen/CjBhm

Answer 1

不要使用定位，在您的情况下不需要。我认为您曾经将图标对齐到正确的位置，但您可以使用position: absolute;

对齐而不使用

现在，如果删除定位，文本将垂直对齐基础，原因是<i>是一个内联元素，默认情况下与 baseline 对齐，因此您需要使用vertical-align: middle;

Demo

.fa-user {
    vertical-align: middle;
}

Answer 2

<强> HTML

<div class="user">
  <ul>
    <li>         
      <i class="fa fa-2x fa-border fa-user">some text</i>             
    </li>
  </ul>
</div>

在此处使用<i></i>代码并且之间没有任何文字，这不是一个好主意。 我只能猜测，但很快您可能会使用此链接重定向到其他页面，因此当用户点击超链接而不仅仅是fa-user图形时会发生这种情况，因为后者会使文本变得多余。

对于css部分，

<强> CSS

ul li {
  display: inline-block;
}

.fa-user {
  margin: 5px;
}

.user {
  position: absolute;
}

为什么我的文字和图标破了？

2 个答案: