CSS：强制li与图标元素之间的间距，忽略文本

Question

我有一个非常简单的顶级菜单：

<ul>
  <li>
    <i icon-something></i>
    <a href ="/link">text</a>
  </li>
  <li>
    <i icon-another></i>
    <a href ="/link">longer text</a>
  </li>
</ul>

像往常一样，它向左浮动，图标在文字上方。

具有以下（较少）样式：

.mainMenu
{
  list-style: none;
  float: left;
  top: 10px;

  a {
    text-decoration: none;
    font-size:11px;
    position: relative;
    top:-15px;
    line-height: 12px;
    display:inline-block;

  };
  li {
    width: 24px;
    float: left;
    text-align: center;
    margin-right:45px; //<=my problem
  }
  [class^="icon-"], [class*=" icon-"] {
    font-size:24px;

  }

}

我的问题： 我需要将图标之间的间距设置为45px。但我现在这样做的方式是在整个li元素之间设置间距。因为有些文本比另一文本长。这会导致右侧的下一个文本向右移动。和生长的间距，这是不需要的。我确定有办法解决这个问题，我很乐意为此提供一些帮助。