HTML / CSS ul鏈接列表不會水平對齊

Question

我試圖在頁面頂部制作一個水平導航欄。 當我將鏈接添加到我的無序列表時，它們的格式不再是水平的，而是垂直於頁面中心。

我讀到我需要將邊距格式設置為自動，但是我認為它們已經正確設置了格式。

 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> 

Answer 1

更改列表項（ <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> 

默認情況下，列表項具有列表項的顯示，該列表項生成一個阻止框。

Answer 2

嗨，如果您將此添加到您的代碼

.nav ul li{ display:inline;}

Answer 3

嘗試添加這個

 li { display: inline-block; } 

Answer 4

您需要添加ul li { display: inline; } 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>