UL 列表在标题中溢出 [重复]答案

【问题标题】：UL List overflows in heading [duplicate]UL 列表在标题中溢出 [重复]
【发布时间】：2020-12-15 11:21:10
【问题描述】：

我正在开发一个网站，在标题中，有很多列表项。问题是我希望最后一个列表项在父 div 结束的地方结束。

我希望这个 ul 列表“紧急”的最后一项以导航宽度的结尾结束。它总是溢出来。

这是我的代码：

header {
  width: 100%;
  height: 15%;
  background-color: #ab9a31;
}

div.container {
  width: 75%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  position: relative;
  top: -8px;
}

p {
  white-space: nowrap;
  width: 100%;
}

nav {
  width: 100%;
}
nav ul {
  list-style-type: none;
  display: flex;
  border: rgba(255, 255, 255, 0.5) solid 2px;
}

nav ul li {
  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>

如何在导航宽度内放置整个列表？

【问题讨论】：

不要使用百分比填充，这是你的问题。使用像素值

标签： html css

【解决方案1】：

只需使用此代码。

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>

【讨论】：

我们为什么要分配width: auto;？ display: table 中元素的行为如何变化？
@NishantJalan，您正在指定justify-content: space-between，因此您不需要为每一侧指定width: 100%。 Auto 是元素的实际宽度。 display: table 是对fit-content 的模仿。