Question

I am building a navigation bar for my website . This navigation bar elements are dynamic . To fit the elements automatically I have the below code

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

This works fine . But if I have space between words in a tab ( <li> tag ) it splits into two lines . If I add   it works fine .

Please have a look at the below fiddle what I am talking

http://jsfiddle.net/MJEKa/

You can see I used   in the first nav bar and it looks good . But the second one you see it splits . ( You can see some other option in the end )

I am wondering any solution without using   ?

Thanks for your help

Answer 1

Try to use white-space: nowrap; to stop wrapping of text.