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;来停止包装文字。

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

1 个答案: