构建导航栏 - 单词之间的 LI 标签空间进入下一行

Question

我正在为我的网站构建导航栏。此导航栏元素是动态的。为了自动适应元素，我有以下代码

.mytaboptions {
    position: relative;
    margin: 0px 0 10px 0;
    font-weight: bold;
    font-family: arial;
    font-size: 11px;        
    background-color: #305081;    
}
.mytaboptions li {
    list-style-type: none;
    margin: 0;
    display: table-cell;
    width: 1%;
    background-color: #305081;
}
.mytaboptions li a {
    display: block;
    text-align: center;
    line-height: 15px;
    color: #AAAAAA;
    text-decoration: none;    
}
.mytaboptions li a:hover {
    color: #00788A;
    background: #c7c7c7;
}
.mytaboptions li.active a {
    border-bottom: 2px solid #DADADA;    
}
.mytaboptions li.selected {
    background: #fafbfd;
    border-bottom:none;    
}
.mytaboptions span{
    font-size: 10px;
    font-style:italic;
    color: #AAAAAA;
}

这工作正常.但是如果我在选项卡（<li>标签）中的单词之间有空格，它会分成两行。如果我添加 它工作正常.

请看下面的小提琴我在说什么

http://jsfiddle.net/MJEKa/

您可以看到我在第一个导航栏中使用了 ，看起来不错.但是你看到的第二个分裂了.（最后你可以看到其他一些选项）

我想知道不使用 的任何解决方案？

感谢您的帮助

Answer 1

尝试使用 white-space: nowrap; 停止文本换行。