CSS - 如何在一行中显示下拉文本？

Question

我建立一个下拉菜单，我有一个问题，表现出对这个IMG：

我想被旁边的“项目”文本显示“2.1”的文字。对于某些原因，每一个新单词都会有新的改变。

这里的HTML：

<ul id='nav'> 
    <li><a href='/'>Item 1</a></li> 
    <li><a href='/'>Item 2</a> 
     <ul> 
      <li><a href='/'>Item 2.1</a></li> 
     </ul> 
    </li> 
    <li><a href='/'>Item 3</a></li> 
    <li><a href='/'>Item 4</a></li> 
    <li><a href='/'>Item 5</a></li> 
</ul> 

而这里的CSS：

#nav { 
    list-style: none; 
} 
#nav li { 
    float: left; 
    position: relative; 
} 
#nav li a { 
    display: block; 
    text-decoration: none; 
    text-align: center; 
    background: #ccc; 
    margin-right: 5px; 
} 
#nav li ul { 
    position: absolute; 
} 
#nav li ul li { 
    display: block; 
} 
#nav li ul li a { 
    padding: 0px 10px; 
    height: 20px; 
    text-align: left; 
    background: #999; 
} 

感谢您的帮助，迈克。

Answer 1

一个简单的方法来解决，这是添加NOWRAP属性#nav li ul li a：

#nav li ul li a { 
    padding: 0px 10px; 
    height: 20px; 
    text-align: left; 
    background: #999; 
    white-space: nowrap; /* Forbids text wrapping */ 
}