Question

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

在第2和第3个菜单上，有一个元素列表，最后一个元素是较大的元素断行，我已将UL设置为宽度自动，显示块或内联块，除了我时没有任何作用为subnav LI设置一个值，然后它工作，我不想这样做，因为它可能会导致很多维护。

那么，我如何让那些不会破坏线条。

<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元素即使用显示块也能破坏内容

1 个答案: