Li element breaking content even with display block

问题

I have a drop down menu and obviously, some items are larger than other, so the UL needs to increase it's width and fit the item, this is not happening on my menu.

Check this fiddle: http://jsfiddle.net/U9h26/

On the 2nd and 3rd menu, there is a list of elements, the last element which is the bigger one breaks the line, I have set the UL to width auto, display block or inline block, and nothing works except when I set a value for the subnav LI, then it works, I don't want to do this way cause it may cause a lot of maintenance.

So, how do I make those itens not to break lines.

<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 -->

回答1:

Add white-space: nowrap to your CSS.

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

来源：https://stackoverflow.com/questions/21269435/li-element-breaking-content-even-with-display-block

标签

html

css

drop-down-menu

html-lists