我想在我的页面顶部制作一个水平导航栏。当我将链接添加到我的无序列表时，它们的格式不再是水平的，而是垂直于页面中心。
我读到我需要将边距格式化为自动，但我认为它们已经正确格式化。
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>最佳答案
更改列表项 ( <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>默认情况下，列表项显示的是生成 block 框的列表项。
关于HTML/CSS ul 链接列表不会水平对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35950128/