对齐菜单中的文字

Question

我正在建立一个自适应网站。

我的菜单有问题。 看起来像这个大的时候：

并且当浏览器窗口较小时这样：

如何设计它以使它看起来像这样小？

这是我的HTML

<ul id="lg-menu" class="nav">
<li class="active">
    <a href="/Appointment/Uncompleted">

        <i class="glyphicon glyphicon-unchecked"></i>
        <span class="menuItenText">AVerySuperLong PrettyWord</span>
    </a>
</li>
<li class="active">
    <a href="/Member">
        <i class="glyphicon glyphicon-unchecked"></i>
        <span class="menuItenText">AShort ButPrettyWord</span>
    </a>
</li>

编辑： js：小提琴：http://jsfiddle.net/y74K4/

Answer 1

尝试这有助于你

DEMO

将display:table-cell属性用于i和span元素。

CSS

.nav{
    display:table;
}

.nav > li{
    display: table-row;
    background-color:blue;
}

.nav li i{
    display:table-cell;
    vertical-align:middle;
    line-height:1.1em;
    color:#fff;
    padding-right:5px;
}
.nav li span{
    display:table-cell;
    color:#fff;
}