为什么我的无序列表改变了行？

Question

导航栏中的导航链接在导航栏之外下降，如何将导航链接保留在导航栏内？

目前它看起来像这样，但我想让它内联显示：

Take a look at this, shows what i currently have

我的 HTML 代码如下所示：

<!DOCTYPE html>
<html lang="de">
    <head>
        <title>PAVILLONS DIREKT SB-Pavillons Miet-Mobilbanken Miet-SV-Pavillons Bankentechnik</title>
        <link rel="icon" type="image/png" href="images/favi-logo.png">
        <meta name="author" content="Pavillons Direkt">
        <meta name="publisher" content="Pavillons Direkt">
        <meta name="copyright" content="Pavillons Direkt 2015">
        <meta name="keywords" content="SB-Pavillon,Pavillons,Miet-Mobilbanke,Mobilbanken,Mobilbank,Miet-Mobilbanken,Miet-SB-Pavillon,Miet-SB-Pavillon,Miet-SB-Pavillons, bankcontainer, pod, pods, cash-point, cash-points, city-cash-point,citycashpoint,bank-container,miet-bank,Ritzenthaler,Pavillons Direkt,ash banksystem,nautech,inform,synfis,kompaktbau writz,gunnebo,garny,safecor,leicher,gaalego,wincor nixdorf,ncr,diebold,geldautomat,geldautomaten,telefonzelle,heventa">
        <meta name="description" content="Pavillons Direkt ist Ihr langj&auml;hriger Partner f&uuml;r SB-Pavillons, Miet-Mobilbanken, Miet-SB-Pavillons sowie Banken- und Sicherheitstechnik. Entwicklung, Fertigung, Verkauf, Vermietung und Service aus einer Hand.">
        <meta http-equiv="content-language" content="de-DE">
        <meta name="robots" content="all">
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="imagetoolbar" content="no">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
        <link rel="stylesheet" type="text/css" href="css/default.css">
    </head>
    <body>
        <section id="mobile-menu">
            <ul>
                <li><a class="mobile-menu-button" href="#mobile-menu"><i class="fa fa-bars fa-2x"></i></a></li>
            </ul>
        </section>
        <header>
            <img id="logo-img" src="images/logo.png">
            <p>Hier kann noch ein Motto hin!</p>
        </header>
        <nav class="navigation">
            <ul>
                <li><a href="index.html" class="current">Home</a></li>
                <li><a href="about.html">&Uuml;ber uns</a></li>
                <li>
                    <a href="#">Produkte
                    <ul class="product-selector">
                        <li class="product-selector">
                            SB-Pavillons
                            <ul class="product-selector">
                                <li class="product-selector">
                                    Outdoor-Line
                                    <ul class="product-selector">
                                        <li class="product-selector"><a href="">Outdoor 4</a></li>
                                        <li class="product-selector"><a href="">Outdoor "New"</a></li>
                                    </ul class="product-selector">
                                </li>
                                <li class="product-selector">
                                    Basic-Line
                                    <ul class="product-selector">
                                        <li class="product-selector"><a href="">Basic 4</a></li>
                                        <li class="product-selector"><a href="">Basic 6</a></li>
                                    </ul>
                                </li>
                                <li class="product-selector">
                                    Business-Line
                                    <ul class="product-selector">
                                        <li class="product-selector"><a href="">Business 8</a></li>
                                        <li class="product-selector"><a href="">Business 12</a></li>
                                    </ul>
                                </li>
                                <li class="product-selector">
                                    Image-Line
                                    <ul class="product-selector">
                                        <li class="product-selector"><a href="">Image 11</a></li>
                                        <li class="product-selector"><a href="">Image 16</a></li>
                                    </ul>
                                </li>
                                <li class="product-selector"><a href="">Individuell</a></li>
                                <li class="product-selector"><a href="">Gebrauchte</a></li>
                            </ul>
                        </li>
                        <li class="product-selector">
                            Miet-Banken
                            <ul class="product-selector">
                                <li class="product-selector">
                                    MietMobilbanken
                                    <ul class="product-selector">
                                        <li class="product-selector"><a href="">Mobilbanke 12x3m</a></li>
                                        <li class="product-selector"><a href="">Mobilbank 5x3m</a></li>
                                    </ul>
                                </li>
                                <li class="product-selector">
                                    MietSBPavillons
                                    <ul class="product-selector">
                                        <li class="product-selector"><a href="">Miet-SB-Pavillon</a></li>
                                        <li class="product-selector"><a href="">MietSBContainer</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="product-selector">
                            Sonstige
                            <ul class="product-selector">
                                <li class="product-selector"><a href="">Indoor-SB-L&ouml;sungen</a></li>
                                <li class="product-selector"><a href="">Sonstige 2</a></li>
                                <li class="product-selector"><a href="">Sonstige 3</a></li>
                                <li class="product-selector"><a href="">Sonstige 4</a></li>
                            </ul>
                        </li>
                    </ul>
                    </a>
                </li>
                <li><a href="partners.html">Partner</a></li>
                <li><a href="intranet.html">Intranet</a></li>
                <li><a href="contact.html">Kontakt</a></li>
                <li><a href="impressum.html">Impressum</a></li>
            </ul>
        </nav>
        <section id="main-site">
            <article>
                <h2>Herzlich Willkommen!</h2>
                <p>Willkommen auf unseren Seiten und vielen Dank f&uuml;r Ihr Interesse. Wir m&ouml;chten Ihnen hier einen kurzen Einblick in unser Produktprogramm und unsere M&ouml;glichkeiten geben.</p>
                <p>Sie suchen eine Gesch&auml;ftsstelle zur Miete, die Sie w&auml;hrend des Umbaus Ihrer Filialen oder f&uuml;r Ihre Pr&auml;senz bei Veranstaltungen und Events nutzen k&ouml;nnen? Mit unseren Miet-Mobilbanken und Miet-SB-Pavillons verf&uuml;gen Sie immer &uuml;ber die richtige L&ouml;sung.</p>
                <p>Oder planen Sie f&uuml;r Ihre Kunden eine SB-Gesch&auml;ftsstelle? Mit unserer breiten Auswahl an SB-Pavillons finden Sie sicher auch die f&uuml;r Sie perfekte L&ouml;sung. Durch kurze Lieferzeiten und die M&ouml;glichkeit der Umsetzung bleiben Sie von Anfang an flexibel. Gern fertigen wir auch Ihren ganz individuellen SB-Pavillon.</p>
                <p>Selbstverst&auml;ndlich bieten wir Ihnen auch s&auml;mtliche Dienstleistungen rund um unsere Produkte an. Wartungen, Reparaturen, Renovierung und Umsetzungen geh&ouml;ren ebenso dazu, wie die bauliche Anpassung bei &Auml;nderung der Anforderungen an Ihren SB-Pavillon.</p>
            </article>
            <aside>
                <section>
                    <h2>News</h2>
                </section>
            </aside>
        </section>
        <footer>
            <ul>
                <li><b>&copy; 2015, PAVILLONS DIREKT</b></li>
                <li><a href="contact.html"><i class="fa fa-phone"></i>&nbsp;&nbsp;Kontakt</a></li>
                <li><a href="impressum.html"><i class="fa fa-info"></i>&nbsp;&nbsp;Ipressum</a></li>
            </ul>
        </footer>
    </body>
</html>

我的 CSS 看起来像这样：

body {
    color: #333;
    background-color: #ffffff;
    font-size: 100%;
    margin: 0em;
    padding: 0em;
}

ul {
    margin: 0px;
    padding: 0px;
}

li {
    list-style: none;
    line-height: 1.25em;
    font-family: Helvetica;
    font-weight: 100;
    margin: .313em .0em .0313em .0em;
    padding: 1.25em;
}

h1 {
    font-size: 2.5em;
    line-height: 3.8em;
    font-family: Helvetica;
    font-weight: 100;
    margin: 0em;
}

h2 {
    font-size: 1.563em;
    line-height: 1.8em;
    font-family: Helvetica;
    font-weight: 100;
    margin: 0em;
    padding: 1.25em;
    text-align: left
}

p {
    line-height: 1.25em;
    font-family: Helvetica;
    font-weight: 100;
    margin: 0em;
    padding: 1.25em;
    text-align: justify;
}

img {
    width: 90%;
    height: auto;
    max-width: 100%;
}

/* Mobile-Menu */

#mobile-menu {
    display: block;
    background-color: #ffffff;
}

#mobile-menu ul {
    display: block;
    width: 2em;
    padding: .9em;
}

#mobile-menu ul {
    display: inline;
}

#mobile-menu ul li {
    display: inline;
}

#mobile-menu ul li a {
    text-decoration: none;
}

/* Head */

header {
    display: block;
    background: #ffffff;
    text-align: center;
}

#logo-img {
    width: 20%;
}

/* Main Nav */

nav {
    display: block;
    height: 2.5em;
    background: #333;
    color: red;
    text-align: center;
}

nav ul {
    display: block;
}

nav ul li {
    display: inline;
    margin: .0em .188em .0em .188em;
}

nav ul li ul {
    display: inline;
    margin: .0em .188em .0em .188em;
}

nav ul li ul li {
    display: inline;
    margin: .0em .188em .0em .188em;
}

nav ul li ul li a {
    font-size: 1.125em;
    line-height: 2.5em;
    padding: .0563em .0938em .375em .0938em;
    transition:background 0.2s;
    -webkit-transition:background 0.2s;
    color: red;
}

nav ul li ul li ul {
    display: inline;
    margin: .0em .188em .0em .188em;
}

nav ul li ul li ul li {
    display: inline;
    margin: .0em .188em .0em .188em;
}

nav ul li ul li ul li a {
    font-size: 1.125em;
    line-height: 2.5em;
    padding: .0563em .0938em .375em .0938em;
    transition:background 0.2s;
    -webkit-transition:background 0.2s;
    color: red;
}

nav ul li a {
    font-size: 1.125em;
    line-height: 2.5em;
    padding: .0563em .0938em .375em .0938em;
    transition:background 0.2s;
    -webkit-transition:background 0.2s;
    color: red;
}

nav ul li a:hover {
    background: #8C8888;
    border-bottom: 0.188em solid #5298F2;
    text-decoration: none;
}

nav ul li a:link {
    text-decoration: none;
}

nav ul li a:visited {
    text-decoration: none;
}

nav ul li a:active {
    text-decoration: none;
}

nav ul li a:focus {
    text-decoration: none;
}

nav ul li a.current {
    border-bottom: 0.188em solid #5298F2;
}

.product-selector {
    visibility: hidden;
}

感谢您的帮助:)

Answer 1

到处都是无效的标记放置。拿这个 fiddle 填空。 http://jsfiddle.net/c9dhn9nc/34/

<nav class="navigation">
  <ul>
    <li><a href="index.html" class="current">Home</a></li>
    <li><a href="about.html">&Uuml;ber uns</a></li>
    <li>
    <a href="#">Produkte</a></li>
    <li class="product-selector">Sonstige</li>
    <li><a href="partners.html">Partner</a></li>
    <li><a href="intranet.html">Intranet</a></li>
    <li><a href="contact.html">Kontakt</a></li>
    <li><a href="impressum.html">Impressum</a></li>
  </ul>
</nav>

Answer 2

你的玩法错了属性。您要做的是隐藏子列表。正确的做法是将 display: none 切换为 display: block 或 display: inline-block 属性。您打算做的是将 visibility: hidden 切换为 visibility: visible 属性。也就是你问题的症结所在。

你需要了解display: none和visibility: visible之间的区别。这里已经有一个问题了 -> What is the difference between visibility:hidden and display:none?

只是借用 Kevin 的答案（这是正确的答案）：

display:none means that the tag in question will not appear on the page at all (although you can still interact with it through the dom). There will be no space allocated for it between the other tags.

visibility:hidden means that unlike display:none, the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn't seen on the page.

请参阅下面从 visibility: hidden 到 display: none 的更改如何影响外观（您还需要在所有子列表上实施此操作）：

body {
    color: #333;
    background-color: #ffffff;
    font-size: 100%;
    margin: 0em;
    padding: 0em;
}

ul {
    margin: 0px;
    padding: 0px;
}

li {
    list-style: none;
    line-height: 1.25em;
    font-family: Helvetica;
    font-weight: 100;
    margin: .313em .0em .0313em .0em;
    padding: 1.25em;
}

h1 {
    font-size: 2.5em;
    line-height: 3.8em;
    font-family: Helvetica;
    font-weight: 100;
    margin: 0em;
}

h2 {
    font-size: 1.563em;
    line-height: 1.8em;
    font-family: Helvetica;
    font-weight: 100;
    margin: 0em;
    padding: 1.25em;
    text-align: left
}

p {
    line-height: 1.25em;
    font-family: Helvetica;
    font-weight: 100;
    margin: 0em;
    padding: 1.25em;
    text-align: justify;
}

img {
    width: 90%;
    height: auto;
    max-width: 100%;
}

/* Mobile-Menu */

#mobile-menu {
    display: block;
    background-color: #ffffff;
}

#mobile-menu ul {
    display: block;
    width: 2em;
    padding: .9em;
}

#mobile-menu ul {
    display: inline;
}

#mobile-menu ul li {
    display: inline;
}

#mobile-menu ul li a {
    text-decoration: none;
}

/* Head */

header {
    display: block;
    background: #ffffff;
    text-align: center;
}

#logo-img {
    width: 20%;
}

/* Main Nav */

nav {
    display: block;
    height: 2.5em;
    background: #333;
    color: red;
    text-align: center;
}

nav ul {
    display: block;
}

nav ul li {
    display: inline;
    margin: .0em .188em .0em .188em;
}

nav ul li ul {
    display: inline;
    margin: .0em .188em .0em .188em;
}

nav ul li ul li {
    display: inline;
    margin: .0em .188em .0em .188em;
}

nav ul li ul li a {
    font-size: 1.125em;
    line-height: 2.5em;
    padding: .0563em .0938em .375em .0938em;
    transition:background 0.2s;
    -webkit-transition:background 0.2s;
    color: red;
}

nav ul li ul li ul {
    display: inline;
    margin: .0em .188em .0em .188em;
}

nav ul li ul li ul li {
    display: inline;
    margin: .0em .188em .0em .188em;
}

nav ul li ul li ul li a {
    font-size: 1.125em;
    line-height: 2.5em;
    padding: .0563em .0938em .375em .0938em;
    transition:background 0.2s;
    -webkit-transition:background 0.2s;
    color: red;
}

nav ul li a {
    font-size: 1.125em;
    line-height: 2.5em;
    padding: .0563em .0938em .375em .0938em;
    transition:background 0.2s;
    -webkit-transition:background 0.2s;
    color: red;
}

nav ul li a:hover {
    background: #8C8888;
    border-bottom: 0.188em solid #5298F2;
    text-decoration: none;
}

nav ul li a:link {
    text-decoration: none;
}

nav ul li a:visited {
    text-decoration: none;
}

nav ul li a:active {
    text-decoration: none;
}

nav ul li a:focus {
    text-decoration: none;
}

nav ul li a.current {
    border-bottom: 0.188em solid #5298F2;
}

.product-selector {
    display: none;
}

<section id="mobile-menu">
            <ul>
                <li><a class="mobile-menu-button" href="#mobile-menu"><i class="fa fa-bars fa-2x"></i></a></li>
            </ul>
        </section>
        <header>
            <img id="logo-img" src="images/logo.png">
            <p>Hier kann noch ein Motto hin!</p>
        </header>
        <nav class="navigation">
            <ul>
                <li><a href="index.html" class="current">Home</a></li>
                <li><a href="about.html">&Uuml;ber uns</a></li>
                <li>
                    <a href="#">Produkte
                    <ul class="product-selector">
                        <li class="product-selector">
                            SB-Pavillons
                            <ul class="product-selector">
                                <li class="product-selector">
                                    Outdoor-Line
                                    <ul class="product-selector">
                                        <li class="product-selector"><a href="">Outdoor 4</a></li>
                                        <li class="product-selector"><a href="">Outdoor "New"</a></li>
                                    </ul class="product-selector">
                                </li>
                                <li class="product-selector">
                                    Basic-Line
                                    <ul class="product-selector">
                                        <li class="product-selector"><a href="">Basic 4</a></li>
                                        <li class="product-selector"><a href="">Basic 6</a></li>
                                    </ul>
                                </li>
                                <li class="product-selector">
                                    Business-Line
                                    <ul class="product-selector">
                                        <li class="product-selector"><a href="">Business 8</a></li>
                                        <li class="product-selector"><a href="">Business 12</a></li>
                                    </ul>
                                </li>
                                <li class="product-selector">
                                    Image-Line
                                    <ul class="product-selector">
                                        <li class="product-selector"><a href="">Image 11</a></li>
                                        <li class="product-selector"><a href="">Image 16</a></li>
                                    </ul>
                                </li>
                                <li class="product-selector"><a href="">Individuell</a></li>
                                <li class="product-selector"><a href="">Gebrauchte</a></li>
                            </ul>
                        </li>
                        <li class="product-selector">
                            Miet-Banken
                            <ul class="product-selector">
                                <li class="product-selector">
                                    MietMobilbanken
                                    <ul class="product-selector">
                                        <li class="product-selector"><a href="">Mobilbanke 12x3m</a></li>
                                        <li class="product-selector"><a href="">Mobilbank 5x3m</a></li>
                                    </ul>
                                </li>
                                <li class="product-selector">
                                    MietSBPavillons
                                    <ul class="product-selector">
                                        <li class="product-selector"><a href="">Miet-SB-Pavillon</a></li>
                                        <li class="product-selector"><a href="">MietSBContainer</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="product-selector">
                            Sonstige
                            <ul class="product-selector">
                                <li class="product-selector"><a href="">Indoor-SB-L&ouml;sungen</a></li>
                                <li class="product-selector"><a href="">Sonstige 2</a></li>
                                <li class="product-selector"><a href="">Sonstige 3</a></li>
                                <li class="product-selector"><a href="">Sonstige 4</a></li>
                            </ul>
                        </li>
                    </ul>
                    </a>
                </li>
                <li><a href="partners.html">Partner</a></li>
                <li><a href="intranet.html">Intranet</a></li>
                <li><a href="contact.html">Kontakt</a></li>
                <li><a href="impressum.html">Impressum</a></li>
            </ul>
        </nav>
        <section id="main-site">
            <article>
                <h2>Herzlich Willkommen!</h2>
                <p>Willkommen auf unseren Seiten und vielen Dank f&uuml;r Ihr Interesse. Wir m&ouml;chten Ihnen hier einen kurzen Einblick in unser Produktprogramm und unsere M&ouml;glichkeiten geben.</p>
                <p>Sie suchen eine Gesch&auml;ftsstelle zur Miete, die Sie w&auml;hrend des Umbaus Ihrer Filialen oder f&uuml;r Ihre Pr&auml;senz bei Veranstaltungen und Events nutzen k&ouml;nnen? Mit unseren Miet-Mobilbanken und Miet-SB-Pavillons verf&uuml;gen Sie immer &uuml;ber die richtige L&ouml;sung.</p>
                <p>Oder planen Sie f&uuml;r Ihre Kunden eine SB-Gesch&auml;ftsstelle? Mit unserer breiten Auswahl an SB-Pavillons finden Sie sicher auch die f&uuml;r Sie perfekte L&ouml;sung. Durch kurze Lieferzeiten und die M&ouml;glichkeit der Umsetzung bleiben Sie von Anfang an flexibel. Gern fertigen wir auch Ihren ganz individuellen SB-Pavillon.</p>
                <p>Selbstverst&auml;ndlich bieten wir Ihnen auch s&auml;mtliche Dienstleistungen rund um unsere Produkte an. Wartungen, Reparaturen, Renovierung und Umsetzungen geh&ouml;ren ebenso dazu, wie die bauliche Anpassung bei &Auml;nderung der Anforderungen an Ihren SB-Pavillon.</p>
            </article>
            <aside>
                <section>
                    <h2>News</h2>
                </section>
            </aside>
        </section>
        <footer>
            <ul>
                <li><b>&copy; 2015, PAVILLONS DIREKT</b></li>
                <li><a href="contact.html"><i class="fa fa-phone"></i>&nbsp;&nbsp;Kontakt</a></li>
                <li><a href="impressum.html"><i class="fa fa-info"></i>&nbsp;&nbsp;Ipressum</a></li>
            </ul>
        </footer>

为什么我的无序列表改变了行？

Why is my unordered list changing the line?

html

css

navigation

html-lists