Html 对齐“我的菜单”中的文本

我正在建立一个快速响应的网站

我的菜单有问题。 当它很大的时候看起来是这样的：

当浏览器窗口变小时，如下所示：

当它很小的时候，我如何设计它使它看起来像这样

这是我的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:fiddle:

如果这对你有帮助，试试看

对

i

和

span

元素使用

display:table cell

属性

CSS

---

有我们需要知道的CSS吗？也许可以创建一个小提琴为这个…请把你的css文件。没有css是需要的，除了引导演示。无论如何，我在这里创建了一个JSFIDLE：

.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;
}