After I keep elements on single line in fixed width , how can I move the icon before link?

Question

After I keep li elements on the single line in fixed width <ul>, how can I move the icon before links?

.KK1 {
  width: 250px;
  display: table;
  table-layout: fixed;
  padding-left: 0;
}
.KK1 > li {
  display: table-cell;
}
.KK1 > li > a {
  display: block;
}
.icon-user {}

<ul class="KK1">
  <li><a href="#"><i class="icon-user">link</i></a>
  </li>
  <li><a href="#"><i class="icon-user">link</i></a>
  </li>
</ul>

And my .icon-user just can adjust margin-left and margin-right, can't adjust margin-top and margin-bottom.

Answer 1

Simple, because <i> elements are not block-level elements but inline-level elements

Solution: Your <li> elements are block-level, you might want to put class='icon-user' there.

See also:

• Why does margin-top work with inline-block but not with inline?

Answer 2

try using display: inline-block;

.icon-user{
   display: inline-block
   /* plus your styles */
}