我正在開發一個網站，在標題，有相當多的列表項目。問題是我希望最后一個列表項在父div結束的地方結束。 我想我的最后一項ul列表“緊急”結束與導航寬度結束。它總是溢出來。 這是我的代碼： 如何在導航寬度內調整整個列表？
只要用這個代碼。 body { box-sizing: border-box; margin: 0; padding: 0; } header { display: flex; width: 100%; height: 15%; background-color: #ab9a31; } div.container { width: 75%; height: 100%; margin: 0 auto; display: flex; justify-content: space-between; } p { white-space: nowrap; width: auto; } nav { display: flex; width: auto; } nav ul { list-style-type: none; display: flex; border: rgba(255, 255, 255, 0.5) solid 2px; padding: 0; box-sizing: border-box; } nav ul li { display: table; white-space: nowrap; padding: 0 2%; } nav ul li a { font-size: 0.9em; color: black; text-decoration: none; } nav ul li a:hover { text-decoration: underline; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My Title</title> <meta name="viewport" content="width=device-width initial-width=1.0"> <link src="css/main.css" rel="stylesheet"> </head> <body> <header> <div class="container"> <p>Find info for?</p> <nav> <ul> <li><a href="#">Apply</a></li> <li><a href="#">News</a></li> <li><a href="#">President</a></li> <li><a href="#">Shop</a></li> <li><a href="#">Visit</a></li> <li><a href="#">Give</a></li> <li><a href="#">Emergency</a></li> </ul> </nav> </div> </header> </body> </html>
只要用這個代碼。