导航栏中的导航链接正在导航栏外部下降，如何将导航栏中的导航链接保留在导航栏中？
目前它看起来像这样，但我想让它显示为内联：
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ähriger Partner fü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">Ü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ö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ür Ihr Interesse. Wir möchten Ihnen hier einen kurzen Einblick in unser Produktprogramm und unsere Möglichkeiten geben.</p>
<p>Sie suchen eine Geschäftsstelle zur Miete, die Sie während des Umbaus Ihrer Filialen oder für Ihre Präsenz bei Veranstaltungen und Events nutzen können? Mit unseren Miet-Mobilbanken und Miet-SB-Pavillons verfügen Sie immer über die richtige Lösung.</p>
<p>Oder planen Sie für Ihre Kunden eine SB-Geschäftsstelle? Mit unserer breiten Auswahl an SB-Pavillons finden Sie sicher auch die für Sie perfekte Lösung. Durch kurze Lieferzeiten und die Möglichkeit der Umsetzung bleiben Sie von Anfang an flexibel. Gern fertigen wir auch Ihren ganz individuellen SB-Pavillon.</p>
<p>Selbstverständlich bieten wir Ihnen auch sämtliche Dienstleistungen rund um unsere Produkte an. Wartungen, Reparaturen, Renovierung und Umsetzungen gehören ebenso dazu, wie die bauliche Anpassung bei Änderung der Anforderungen an Ihren SB-Pavillon.</p>
</article>
<aside>
<section>
<h2>News</h2>
</section>
</aside>
</section>
<footer>
<ul>
<li><b>© 2015, PAVILLONS DIREKT</b></li>
<li><a href="contact.html"><i class="fa fa-phone"></i> Kontakt</a></li>
<li><a href="impressum.html"><i class="fa fa-info"></i> 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;
}
感谢您的帮助：）
答案 0 :(得分：2)
您的游戏属于错误的属性。你想要做的是隐藏子列表。这样做的正确方法是将display: none切换为display: block或display: inline-block属性。您打算做的是将visibility: hidden切换为visibility: visible属性。也就是说，问题的症结所在。
您需要了解display: none和visibility: visible之间的区别。这里已经有了一个问题 - ＆gt; What is the difference between visibility:hidden and display:none?
只是借用Kevin在那里的回答（这是明确的答案，这是正确的）：
display:none表示相关标签不会出现在 页面（尽管你仍然可以通过dom与它互动）。 其他标签之间不会为它分配空间。
visibility:hidden表示与display：none不同，标签不是 可见，但在页面上为其分配了空间。标签是 渲染，它只是在页面上看不到。
请参阅下文，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">Ü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ö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ür Ihr Interesse. Wir möchten Ihnen hier einen kurzen Einblick in unser Produktprogramm und unsere Möglichkeiten geben.</p>
<p>Sie suchen eine Geschäftsstelle zur Miete, die Sie während des Umbaus Ihrer Filialen oder für Ihre Präsenz bei Veranstaltungen und Events nutzen können? Mit unseren Miet-Mobilbanken und Miet-SB-Pavillons verfügen Sie immer über die richtige Lösung.</p>
<p>Oder planen Sie für Ihre Kunden eine SB-Geschäftsstelle? Mit unserer breiten Auswahl an SB-Pavillons finden Sie sicher auch die für Sie perfekte Lösung. Durch kurze Lieferzeiten und die Möglichkeit der Umsetzung bleiben Sie von Anfang an flexibel. Gern fertigen wir auch Ihren ganz individuellen SB-Pavillon.</p>
<p>Selbstverständlich bieten wir Ihnen auch sämtliche Dienstleistungen rund um unsere Produkte an. Wartungen, Reparaturen, Renovierung und Umsetzungen gehören ebenso dazu, wie die bauliche Anpassung bei Änderung der Anforderungen an Ihren SB-Pavillon.</p>
</article>
<aside>
<section>
<h2>News</h2>
</section>
</aside>
</section>
<footer>
<ul>
<li><b>© 2015, PAVILLONS DIREKT</b></li>
<li><a href="contact.html"><i class="fa fa-phone"></i> Kontakt</a></li>
<li><a href="impressum.html"><i class="fa fa-info"></i> Ipressum</a></li>
</ul>
</footer>
答案 1 :(得分：1)
您在整个地方都放置了无效的代码。拿这个小提琴填补空白。 http://jsfiddle.net/c9dhn9nc/34/
<nav class="navigation">
<ul>
<li><a href="index.html" class="current">Home</a></li>
<li><a href="about.html">Ü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>