当<li>标签移动到下一行时，<li>标签中的文字位于图标下方

Question

我创建了一个带有一组li标签的无序列表。我使用字体真棒图标作为开始文本之前的图标。

＆＃13;

＆＃13;

#facts i {
        margin-right: 1%;
        font-size: 150%;
        display: block;
        float: left;
    }

＆＃13;

<ul id="facts" class="fa-ul">
      <li class="text-muted">
        <h6 class="text-uppercase"><i class="fa fa-archive fa-2x" aria-hidden="true"></i>&nbsp;Inventory Menu 
        </h6>
      </li>
      <li>
        <h6 class="text-uppercase"><i class="fa fa-industry fa-2x" aria-hidden="true"></i>&nbsp;<a href="warehouse_loc_maint_menu.html">Warehouse Location Maint Menu </a>
        </h6>
      </li>

＆＃13;

＆＃13;

＆＃13;

问题是下一行中的文字位于fa图标下方。我希望下一行中的文本从第一行的开头开始。

这就是结果：

Answer 1

也许这可以帮到你

#facts {
  width: 25px;
}
#facts i {
  position: absolute;
  left: 0px;
}
#facts li {
  position: relative;
  padding-left: 35px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<ul id="facts" class="fa-ul">
  <li class="text-muted">
    <h6 class="text-uppercase"><i class="fa fa-archive fa-2x" aria-hidden="true"></i>Inventory Menu 
    </h6>
  </li>
  <li>
    <h6 class="text-uppercase"><i class="fa fa-industry fa-2x" aria-hidden="true"></i><a href="warehouse_loc_maint_menu.html">Warehouse Location Maint Menu </a>
    </h6>
  </li>
</ul>

Answer 2

所以你想在菜单后面有一个文本或缩进第二个菜单？

你应该看一下：http://jsfiddle.net/4rnNK/1/

ol {
    counter-reset: foo;
    display: table;
}

li {
    list-style: none;
    counter-increment: foo;
    display: table-row;
}

li::before {
    content: counter(foo) ".";
    display: table-cell;
    text-align: right;
    padding-right: .3em;
}