我正在尝试在页面顶部创建一个水平导航栏。当我将链接添加到我的无序列表时，它们不再格式化为水平并且垂直于页面的中心。
我读到我需要将边距格式化为自动，但我认为它们已经格式化了。
html,
head {
font-family: sans-serif;
}
html,
body {
margin: 0;
padding: 0;
font-family: 'Goudy Old Style', Garamond, 'Big Caslon', Sans-Serif;
}
.header {
background: url(https://imagesus-ssl.homeaway.com/mda01/2358e4a3-3618-473b-b198-457b887edb98.1.10) no-repeat center center;
background-size: cover;
height: 30em;
}
.nav {
background: rgba(24, 24, 24, .6);
height: 3em;
text-align: center;
}
.nav ul {
list-style: none;
margin: 0 auto;
padding: 0;
}
.btn {
display: inline-block;
height: 3em;
text-align: center;
font-size: 1em;
list-style: none;
list-style-position: initial;
list-style-image: initial;
padding: 0.75em 1em;
color: white;
text-decoration: none;
}
.btn:hover {
cursor: pointer;
background: #333333;
height: 1.5em;
}
.title {
font-family: 'calibri', cursive;
color: white;
margin-left: 3em;
margin-top: 2em;
margin-right: 8em;
background: rgba(0, 0, 0, .5);
font-size: 4em;
text-align: center;
}
.supporting {
background: #FFF9E9;
height: 30em;
padding: 3em;
color: #56482D;
}
.quote {
height: 5em 2em;
width: 8em;
display: block;
padding: 1em;
float: left;
font-family: cursive;
background-color: white;
margin-right: 2em;
}
.description {
display: block;
float: auto;
}
.description p:nth-child(9) {
text-align: center;
}
span {
font-size: 12px;
margin: 10x;
}<div class="header">
<div class="nav">
<ul>
<li><a class="btn" href="https://www.poipukapili22.com"> Home</a>
</li>
<li><a class="btn" href="#"> Reviews</a>
</li>
<li><a class="btn" href="https://www.google.com"> Photos & Videos</a>
</li>
<li><a class="btn" href="#"> Maps/Location</a>
</li>
<li><a class="btn" href="#"> Amenities</a>
</li>
<li><a class="btn" href="#"> Information</a>
</li>
<li><a class="btn" href="#"> Rates</a>
</li>
<li><a class="btn" href="#"> Check Availability</a>
</li>
<li><a class="btn" href="#"> Book Your Stay</a>
</li>
<li><a class="btn" href="#"> Contact Us</a>
</li>
</ul>
</div>
<div class="title">
Poipu Kapili #22
</div>
</div>
<div class="supporting">
<div class="quote">
<p>"From the lanai we watched snorkel boats and whale spouts right out front."
</p>
<p>Georgina Marion <span> Guest, Jan 2016</span>
</p>
</div>
<div class="description">
<h1> Spectacular views and deluxe furnishings will make Poipu Kapili #22 your home away from home.</h1>
<p>This spacious and comfortable home has an air conditioned master suite and two full bathrooms.</p>
<p>Enjoy the ocean views from living room, dining room, kitchen and lanai. Drift to sleep in the luxury of a king bed.</p>
<p>The views will provide you with endless hours of seasonal whale watching and ocean views. Poipu Kapili is one of the finest resorts on Kauai. With only 60 units on five beautifully-landscaped acres Poipu Kapili offers maximum privacy. Relax and enjoy
the view from the pool and BBQ area as well. Keep in shape and play tennis at one of the two courts located on site.</p>
<p>Snorkeling and beach swimming is across the street adjacent to the Sheraton Hotel. Enjoy an evening walk to restaurants and shops at the nearby Poipu Village or Kukui'ula Shopping Center which features 'Roys' restaurant. Located on the sunny south
shore of Poipu near world famous beaches, the Garden Isle of Kauai will not disappoint.</p>
<p>We want your Hawaii experience to be something you can not wait to repeat. We own and manage our own property and can give you the individual attention that makes the difference.</p>
<p>Poipu Kapili is a complete 'NO SMOKING' property. There is no smoking allowed inside our unit or anywhere on the common area.</p>
<p>*We NEVER will ask you for a WIRE* If anyone ever asks you to wire money - you may be a victim of a scam!!! Always call us if you want any information. We are not overseas - we are in California</p>
<p>If our calendar shows booked, please check out our other equally wonderful homes at <a href="https://www.vrbo.com/127284" target="_blank">vrbo.com/127284</a>.</p>
</div>
答案 0 :(得分：2)
更改列表项（<li>），以便他们可以display:inline-block或float:left;
html,
head {
font-family: sans-serif;
}
html,
body {
margin: 0;
padding: 0;
font-family: 'Goudy Old Style', Garamond, 'Big Caslon', Sans-Serif;
}
.header {
background: url(https://imagesus-ssl.homeaway.com/mda01/2358e4a3-3618-473b-b198-457b887edb98.1.10) no-repeat center center;
background-size: cover;
height: 30em;
}
.nav {
background: rgba(24, 24, 24, .6);
height: 3em;
text-align: center;
}
.nav ul {
list-style: none;
margin: 0 auto;
padding: 0;
}
.btn {
display: inline-block;
height: 3em;
text-align: center;
font-size: 1em;
list-style: none;
list-style-position: initial;
list-style-image: initial;
padding: 0.75em 1em;
color: white;
text-decoration: none;
}
.btn:hover {
cursor: pointer;
background: #333333;
height: 1.5em;
}
.title {
font-family: 'calibri', cursive;
color: white;
margin-left: 3em;
margin-top: 2em;
margin-right: 8em;
background: rgba(0, 0, 0, .5);
font-size: 4em;
text-align: center;
}
.supporting {
background: #FFF9E9;
height: 30em;
padding: 3em;
color: #56482D;
}
.quote {
height: 5em 2em;
width: 8em;
display: block;
padding: 1em;
float: left;
font-family: cursive;
background-color: white;
margin-right: 2em;
}
.description {
display: block;
float: auto;
}
.description p:nth-child(9) {
text-align: center;
}
span {
font-size: 12px;
margin: 10x;
}
li {
display:inline-block;
}<div class="header">
<div class="nav">
<ul>
<li><a class="btn" href="https://www.poipukapili22.com"> Home</a>
</li>
<li><a class="btn" href="#"> Reviews</a>
</li>
<li><a class="btn" href="https://www.google.com"> Photos & Videos</a>
</li>
<li><a class="btn" href="#"> Maps/Location</a>
</li>
<li><a class="btn" href="#"> Amenities</a>
</li>
<li><a class="btn" href="#"> Information</a>
</li>
<li><a class="btn" href="#"> Rates</a>
</li>
<li><a class="btn" href="#"> Check Availability</a>
</li>
<li><a class="btn" href="#"> Book Your Stay</a>
</li>
<li><a class="btn" href="#"> Contact Us</a>
</li>
</ul>
</div>
<div class="title">
Poipu Kapili #22
</div>
</div>
<div class="supporting">
<div class="quote">
<p>"From the lanai we watched snorkel boats and whale spouts right out front."
</p>
<p>Georgina Marion <span> Guest, Jan 2016</span>
</p>
</div>
<div class="description">
<h1> Spectacular views and deluxe furnishings will make Poipu Kapili #22 your home away from home.</h1>
<p>This spacious and comfortable home has an air conditioned master suite and two full bathrooms.</p>
<p>Enjoy the ocean views from living room, dining room, kitchen and lanai. Drift to sleep in the luxury of a king bed.</p>
<p>The views will provide you with endless hours of seasonal whale watching and ocean views. Poipu Kapili is one of the finest resorts on Kauai. With only 60 units on five beautifully-landscaped acres Poipu Kapili offers maximum privacy. Relax and enjoy
the view from the pool and BBQ area as well. Keep in shape and play tennis at one of the two courts located on site.</p>
<p>Snorkeling and beach swimming is across the street adjacent to the Sheraton Hotel. Enjoy an evening walk to restaurants and shops at the nearby Poipu Village or Kukui'ula Shopping Center which features 'Roys' restaurant. Located on the sunny south
shore of Poipu near world famous beaches, the Garden Isle of Kauai will not disappoint.</p>
<p>We want your Hawaii experience to be something you can not wait to repeat. We own and manage our own property and can give you the individual attention that makes the difference.</p>
<p>Poipu Kapili is a complete 'NO SMOKING' property. There is no smoking allowed inside our unit or anywhere on the common area.</p>
<p>*We NEVER will ask you for a WIRE* If anyone ever asks you to wire money - you may be a victim of a scam!!! Always call us if you want any information. We are not overseas - we are in California</p>
<p>If our calendar shows booked, please check out our other equally wonderful homes at <a href="https://www.vrbo.com/127284" target="_blank">vrbo.com/127284</a>.</p>
</div>
默认情况下，列表项会显示list-item，生成一个块框。
答案 1 :(得分：1)
您好，如果将其添加到您的代码中
.nav ul li{ display:inline;}
答案 2 :(得分：0)
尝试添加此
li {
display: inline-block;
}
答案 3 :(得分：0)
您需要将ul li { display: inline; }添加到CSS
html,
head {
font-family: sans-serif;
}
html,
body {
margin: 0;
padding: 0;
font-family: 'Goudy Old Style', Garamond, 'Big Caslon', Sans-Serif;
}
ul li { display: inline; }
.header {
background: url(https://imagesus-ssl.homeaway.com/mda01/2358e4a3-3618-473b-b198-457b887edb98.1.10) no-repeat center center;
background-size: cover;
height: 30em;
}
.nav {
background: rgba(24, 24, 24, .6);
height: 3em;
text-align: center;
}
.nav ul {
list-style: none;
margin: 0 auto;
padding: 0;
}
.btn {
display: inline-block;
height: 3em;
text-align: center;
font-size: 1em;
list-style: none;
list-style-position: initial;
list-style-image: initial;
padding: 0.75em 1em;
color: white;
text-decoration: none;
}
.btn:hover {
cursor: pointer;
background: #333333;
height: 1.5em;
}
.title {
font-family: 'calibri', cursive;
color: white;
margin-left: 3em;
margin-top: 2em;
margin-right: 8em;
background: rgba(0, 0, 0, .5);
font-size: 4em;
text-align: center;
}
.supporting {
background: #FFF9E9;
height: 30em;
padding: 3em;
color: #56482D;
}
.quote {
height: 5em 2em;
width: 8em;
display: block;
padding: 1em;
float: left;
font-family: cursive;
background-color: white;
margin-right: 2em;
}
.description {
display: block;
float: auto;
}
.description p:nth-child(9) {
text-align: center;
}
span {
font-size: 12px;
margin: 10x;
}<div class="header">
<div class="nav">
<ul>
<li><a class="btn" href="https://www.poipukapili22.com"> Home</a>
</li>
<li><a class="btn" href="#"> Reviews</a>
</li>
<li><a class="btn" href="https://www.google.com"> Photos & Videos</a>
</li>
<li><a class="btn" href="#"> Maps/Location</a>
</li>
<li><a class="btn" href="#"> Amenities</a>
</li>
<li><a class="btn" href="#"> Information</a>
</li>
<li><a class="btn" href="#"> Rates</a>
</li>
<li><a class="btn" href="#"> Check Availability</a>
</li>
<li><a class="btn" href="#"> Book Your Stay</a>
</li>
<li><a class="btn" href="#"> Contact Us</a>
</li>
</ul>
</div>
<div class="title">
Poipu Kapili #22
</div>
</div>
<div class="supporting">
<div class="quote">
<p>"From the lanai we watched snorkel boats and whale spouts right out front."
</p>
<p>Georgina Marion <span> Guest, Jan 2016</span>
</p>
</div>
<div class="description">
<h1> Spectacular views and deluxe furnishings will make Poipu Kapili #22 your home away from home.</h1>
<p>This spacious and comfortable home has an air conditioned master suite and two full bathrooms.</p>
<p>Enjoy the ocean views from living room, dining room, kitchen and lanai. Drift to sleep in the luxury of a king bed.</p>
<p>The views will provide you with endless hours of seasonal whale watching and ocean views. Poipu Kapili is one of the finest resorts on Kauai. With only 60 units on five beautifully-landscaped acres Poipu Kapili offers maximum privacy. Relax and enjoy
the view from the pool and BBQ area as well. Keep in shape and play tennis at one of the two courts located on site.</p>
<p>Snorkeling and beach swimming is across the street adjacent to the Sheraton Hotel. Enjoy an evening walk to restaurants and shops at the nearby Poipu Village or Kukui'ula Shopping Center which features 'Roys' restaurant. Located on the sunny south
shore of Poipu near world famous beaches, the Garden Isle of Kauai will not disappoint.</p>
<p>We want your Hawaii experience to be something you can not wait to repeat. We own and manage our own property and can give you the individual attention that makes the difference.</p>
<p>Poipu Kapili is a complete 'NO SMOKING' property. There is no smoking allowed inside our unit or anywhere on the common area.</p>
<p>*We NEVER will ask you for a WIRE* If anyone ever asks you to wire money - you may be a victim of a scam!!! Always call us if you want any information. We are not overseas - we are in California</p>
<p>If our calendar shows booked, please check out our other equally wonderful homes at <a href="https://www.vrbo.com/127284" target="_blank">vrbo.com/127284</a>.</p>
</div>