0
我非常沮喪，因爲我試圖做出一個hotbar，但是ul元素有時會分成幾行。如何強制所有ul元素保持一行？
下面是結果的圖像 - http://i.imgur.com/GN3HH0A.png
如果任何人都可以請讓我知道我能做些什麼來解決這個問題，我會很感激。
代碼如下---
.nav a {
color: black;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
.jumbotron {
background-image:url("");
height: 500px;
background-repeat: no-repeat;
background-size: cover;
}
.jumbotron .container {
position: relative;
top:100px;
}
.nav a {
color: #5a5a5a;
font-size: 11px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
.jumbotron {
background-image:url('http://i.imgur.com/3ay8hjS.jpg');
height: 500px;
background-repeat: no-repeat;
background-size: cover;
}
.jumbotron .container {
position: relative;
top:100px;
}
.jumbotron h1 {
color: #fff;
font-size: 48px;
font-family: 'Shift', sans-serif;
font-weight: bold;
}
.jumbotron p {
font-size: 20px;
color: #fff;
}
.learn-more {
background-color: #f7f7f7;
}
.learn-more h3 {
font-family: 'Shift', sans-serif;
font-size: 18px;
font-weight: bold;
}
.learn-more a {
color: #00b0ff;
}
.neighborhoood-guides {
background-color: #efefef;
border-bottom: 1px solid #dbdbdb
}
.clearfix:after {
display:block;
clear:both;
}
/*----- Menu Outline -----*/
.menu-wrap {
width:100%;
box-shadow:0px 1px 3px rgba(0,0,0,0.2);
background:#fff;
}
.menu {
width:1000px;
margin:0px auto;
}
.menu li {
margin:0px;
list-style:none;
}
.menu a {
transition:all linear 0.15s;
color:black;
}
.menu li:hover > a, .menu .current-item > a {
text-decoration:none;
color:dodgerblue;
}
.menu .arrow {
font-size:11px;
line-height:0%;
}
/*----- Top Level -----*/
.menu > ul > li {
float:left;
display:inline-block;
position:relative;
font-size:11px;
}
.menu > ul > li > a {
padding:10px 40px;
display:inline-block;
text-shadow:0px 1px 0px rgba(0,0,0,0.4);
text-transform:uppercase;
font-weight:bold;
}
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
background:#fff;
}
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
z-index:1;
opacity:1;
}
.sub-menu {
width:160%;
padding:5px 0px;
position:absolute;
top:100%;
left:0px;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
box-shadow:0px 2px 3px rgba(0,0,0,0.2);
background:#fff;
}
.sub-menu li {
display:block;
font-size:11px;
}
.sub-menu li a {
padding:10px 30px;
display:block;
text-transform: uppercase;
font-weight:bold
}
.sub-menu li a:hover, .sub-menu .current-item a {
background:#fff;
}<body>
<div class="menu-wrap">
<nav class="menu">
<ul class="clearfix">
<li>
<a href="#">Destinations <span class="arrow">▼</span></a>
<ul class="sub-menu">
<li><a href="#">Airlines</a></li>
<li><a href="#">Hotels</a></li>
</ul>
</li>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#"> Contact Us</a></li>
<li>
<li><a href="#">Cruiselines</a></li>
<li><a href="#">Weddings & Honeymoons</a></li>
<li>
<a href="#">Useful Information <span class="arrow">▼</span></a>
<ul class="sub-menu">
<li><a href="#">Travel Insurance</a></li>
<li><a href="#">Careers</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="jumbotron">
<div class="container">
<h1>Find the vacation you deserve.</h1>
<p>--- Insert mouth-watering description here ---</p>
</div>
</div>
<div class ="neighborhood-guides">
<div class ="container">
<h2> Neighborhood Guides </h2>
<p> Not sure where to stay? We've created neighborhood guides for cities all around the world.</p>
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<img src="http://goo.gl/0sX3jq">
</div>
<div class="Thumbnail">
<img src="http://goo.gl/an2HXY">
</div>
</div>
<div class="col-md-4">
<div class="Thumbnail">
<img src="http://goo.gl/Av1pac">
</div>
<div class="Thumbnail">
<img src="http://goo.gl/vw43v1">
</div>
</div>
<div class="col-md-4">
<div class="Thumbnail">
<image src="http://goo.gl/0Kd7UO">
</div>
</div>
<div class="learn-more">
\t <div class="container">
\t \t <div class="row">
\t <div class="col-md-4">
\t \t \t <h3>Travel</h3>
\t \t \t <p>From apartments and rooms to treehouses and boats: stay in unique spaces in 192 countries.</p>
\t \t \t <p><a href="#"></a></p>
\t </div>
\t \t <div class ="col-md-4">
\t \t \t <h3>Host</h3>
\t \t \t <p></p>
\t \t \t <p><a href="#"></a></p>
\t \t </div>
\t \t <div class ="col-md-4">
\t \t \t <h3>Trust and Safety</h3>
\t \t \t <p></p>
\t \t \t <p><a href="#"></a></p>
\t \t </div>
\t </div>
\t </div>
</div>
http://jsfiddle.net/RachGal/tqrw2957/ –