李元素打破内容甚至显示模块(Li element breaking content even wit

我有一个下拉菜单，显然，有些项目比其他大，所以UL需要增加它的宽度和适合的项目，这是不会发生我的菜单上。

检查此琴： http://jsfiddle.net/U9h26/

在第二和第三个菜单，还有元素的列表，这是更大的一个突破行的最后一个元素，我已经设置了UL与宽度自动，显示块或内联块，无法工作，除非我设置一个值对于subnav李，那么它的作品，我不想做这样的原因可能会导致大量的维护工作。

所以，如何使那些itens不换行。

<div id="header">
                <div class="logo">
                    <a class="logo" href="index.html"><img src="images/logotipo-linkedu-1.png" alt="LinkEdu" name="LinkEdu" border="0" /></a>
                </div>
                <div class="visitor">Olá, Visitante</div>
                <div class="header-navigation">
                    <ul class="nav">
                        <li class="main-nav"><a href="index.html">Home</a></li>
                        <li class="palestras-menu"><a href="#">LinkEdu</a>
                            <ul class="subnav">
                                <li><a class="subnav-menu" href="#">Sobre</a></li>
                                <li><a class="subnav-menu" href="#">Negocios</a></li>
                                <li><a class="subnav-menu" href="#">Empreendorismo</a></li>
                                <li><a class="subnav-menu" href="#">Como Inserir O que vc quiser</a></li>
                            </ul>
                        </li>
                        <li class="palestras-menu"><a href="palestras.html">Palestras</a>
                            <ul class="subnav">
                                <li><a class="subnav-menu" href="#">Artes</a></li>
                                <li><a class="subnav-menu" href="#">Decoração</a></li>
                                <li><a class="subnav-menu" href="#">Música</a></li>
                                <li><a class="subnav-menu" href="#">Lazer</a></li>
                                <li><a class="subnav-menu" href="#">Negocios</a></li>
                                <li><a class="subnav-menu" href="#">Empreendorismo</a></li>
                                <li><a class="subnav-menu" href="#">Como Inserir O que vc quiser</a></li>
                            </ul>    
                        </li>
                        <li class="main-nav"><a href="cadastro.html">Cadastre-se</a></li>
                        <div class="float-right">
                            <li id="login" class="login"><a id="login-trigger" href="#">Login <span>▼</span></a>
                                <div id="login-content">
                                    <form>
                                        <fieldset id="inputs">
                                            <input id="username" type="email" name="Email" placeholder="E-mail" required> <br />

                                            <input id="password" type="password" name="Password" placeholder="Senha" required>
                                        </fieldset>
                                        <fieldset id="actions">
                                            <input class="login-button" type="submit" id="submit" value="Login">
                                        </fieldset>
                                    </form>
                                </div>                     
                            </li>
                        </div>
                    </ul>
                    <div class="clear"></div>
                </div>

            </div><!-- FIM HEADER -->

Answer 1:

添加空白：NOWRAP你的CSS。

ul.nav li a {  
display: block;
padding: 8px 1px;
width: auto;
margin: 0px 30px;
color: #000;
white-space: nowrap;
text-decoration: none;
}

文章来源: Li element breaking content even with display block