1

ウェブサイトのナビゲーションバーを作成しています。このナビゲーションバーの要素は動的です。要素を自動的にフィットさせるために、以下のコードがあります

.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>タグ）内の単語の間にスペースがある場合は、2行に分割されます。追加すれば&nbsp;問題なく動作します。

私が話している以下のフィドルを見てください

http://jsfiddle.net/MJEKa/

あなたは私&nbsp;が最初のナビゲーションバーで使用したのを見ることができます、そしてそれはよさそうです。しかし、2番目に表示されるのは分割されます。（最後に他のオプションが表示されます）

私は使用せずに解決策を考えてい&nbsp;ますか？

ご協力いただきありがとうございます

4

1 に答える 1

3

white-space: nowrap;テキストの折り返しを停止するために使用してみてください。

于 2012-11-17T14:57:52.840 に答える