Currently, I am in the process of creating a dynamic navigation bar for my website. In order to ensure that the elements within the navigation bar adjust automatically based on content, I have implemented the code below:
.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;
}
Thus far, this solution has been effective. However, I have encountered an issue where if there is space between words within a tab (<li> tag), it splits into two lines. Adding resolves this issue.
To better illustrate this problem, please refer to the following fiddle:
In the first navigation bar, you will notice that the use of produces the desired effect. Conversely, in the second example, without the , the text splits into two lines (specifically noted with "some other option").
I am interested in exploring alternative solutions that do not require the use of . Any insights or suggestions would be greatly appreciated.
Thank you for your assistance!