如何让标题自动调整其高度以适应其内容？答案

【问题标题】：How to get the header to auto adjust its height to its content?如何让标题自动调整其高度以适应其内容？
【发布时间】：2022-01-23 08:34:50
【问题描述】：

使用 flexbox，我用填充和底部边框线设置了链接的样式，但边框线显示在标题线之外，如何让链接及其底部边框线完全位于标题内？

容器不应该自动调整以适应其内容吗？

* {
  box-sizing: border-box;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1rem;
  margin: 0px;
  padding: 0px;
}

body {
  display: flex;
  flex-flow: column;
  height: 100vh;
  background-color: whitesmoke;
}

body>header,
body>footer {
  flex: 0 0 auto;
  background-color: white;
  border-top: 1px solid lightgray;
  border-bottom: 1px solid lightgray;
  /* padding: 0.25rem; */
}

body>header .link {
  color: blue;
  border-bottom: 2px solid transparent;
  outline: 0;
  padding: 0.25rem;
  text-decoration: none;
}

body>header .link:hover,
body>header .link:focus {
  border-bottom: 2px solid blue;
}

body>header .link.title {
  font-size: larger;
  font-variant: small-caps;
}

body>main {
  flex: 1 1 auto;
  overflow: auto;
}

<body>
  <header>
    <a href="#" class="link title">One</a>
    <a href="#" class="link">Two</a>
    <a href="#" class="link">Three</a>
    <a href="#" class="link">Four</a>
    <a href="#" class="link">Five</a>
  </header>
  <main></main>
  <footer>Footer</footer>
</body>

【问题讨论】：

标签： html css

【解决方案1】：

花了一段时间敲打我的头后，我终于找到了方法......我只需要设置标题的display: flex;，就像它工作一样，不需要指定标题的尺寸、边距或填充，我是一个快乐的露营者！

* {
  box-sizing: border-box;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1rem;
  margin: 0px;
  padding: 0px;
}

body {
  display: flex;
  flex-flow: column;
  height: 100vh;
}

body>header,
body>footer {
  flex: 0 0 auto;
  display: flex;
  border-top: 1px solid lightgray;
  border-bottom: 1px solid lightgray;
}

body>header .link {
  color: blue;
  border-bottom: 2px solid transparent;
  outline: 0;
  padding: 0.5rem;
  text-decoration: none;
}

body>header .link:hover,
body>header .link:focus {
  border-bottom: 2px solid blue;
}

body>main {
  flex: 1 1 auto;
  background-color: whitesmoke;
}

<body>
  <header>
    <a href="#" class="link">One</a>
    <a href="#" class="link">Two</a>
    <a href="#" class="link">Three</a>
    <a href="#" class="link">Four</a>
    <a href="#" class="link">Five</a>
  </header>
  <main></main>
  <footer>Footer</footer>
<body>

【讨论】：

【解决方案2】：

您应该尝试将padding-left: 0.25rem 而不是padding: 0.25rem 放在选择器body>header .link 下。如下：

* {
  box-sizing: border-box;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1rem;
  margin: 0px;
  padding: 0px;
}

body {
  display: flex;
  flex-flow: column;
  height: 100vh;
  background-color: whitesmoke;
}

body>header,
body>footer {
  flex: 0 0 auto;
  background-color: white;
  border-top: 1px solid lightgray;
  border-bottom: 1px solid lightgray;
}

body>header .link {
  color: blue;
  border-bottom: 2px solid transparent;
  outline: 0;
  padding: 0.25rem 0.25rem 0 0.25rem;
  text-decoration: none;
  border
}

body>header .link:hover,
body>header .link:focus {
  border-bottom: 2px solid blue;
}

body>header .link.title {
  font-size: larger;
  font-variant: small-caps;
}

body>main {
  flex: 1 1 auto;
  overflow: auto;
}

header {
  min-height: 30px;
}

<body>
  <header>
    <a href="#" class="link title">One</a>
    <a href="#" class="link">Two</a>
    <a href="#" class="link">Three</a>
    <a href="#" class="link">Four</a>
    <a href="#" class="link">Five</a>
  </header>
  <main></main>
  <footer>Footer</footer>
</body>

希望它能解决您的问题。

【讨论】：

您的想法是正确的，因为我想要的是底部边框位于标题行的正上方，但是当您这样做时，底部边框仅延伸到左侧的文本之外并且没有空间在文本和底部边框之间，我想在链接周围创建空间，并通过使用填充我还让底部边框在文本之前和之后延伸。
@JorgeZ 你能解释得更好一点吗，因为我无法正确理解你在说什么。我想我明白你在说什么，但你能解释一下吗？
我想要的是类似于pub.dev/packages/pdf 上的菜单查看菜单“自述文件 | 更改日志 | 示例 | 安装 | 版本 | 分数”
我已经编辑了我的答案，是否满足您的需要。让我知道它是否不能解决您的问题。
在敲了一阵头之后，我终于找到了方法......只需将标题的显示设置为 flex display: flex; 我已经发布了答案。

【解决方案3】：

如果你想让你的父元素适合它的子元素，那么试试display:auto

【讨论】：

不能这样做，因为我使用 flexbox 作为显示。

【解决方案4】：

尝试在标题中添加填充底部。我刚刚在沙盒中尝试了这个，它似乎对我有用。

header{
  padding-bottom: 10px;
}

【讨论】：

我也尝试过填充，但我希望标题自动调整到其内容的高度。

【解决方案5】：

因为您已经为 body > header .link 定义了填充，所以边框会消失。

您可以为<header>添加填充或定义高度，问题将得到解决。

例如：（将padding:0.5rem添加到<header>标签）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        box-sizing: border-box;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-size: 1rem;
        margin: 0px;
        padding: 0px;
      }

      body {
        display: flex;
        flex-flow: column;
        height: 100vh;
        background-color: whitesmoke;
      }
      
      body > header {
        padding:0.5rem
      }

      body > header,
      body > footer {
        flex: 0 0 auto;
        background-color: white;
        border-top: 1px solid lightgray;
        border-bottom: 1px solid lightgray;
        /* padding: 0.25rem; */
      }

      body > header .link {
        color: blue;
        border-bottom: 2px solid transparent;
        outline: 0;
        padding: 0.25rem;
        text-decoration: none;
      }

      body > header .link:hover,
      body > header .link:focus {
        border-bottom: 2px solid blue;
      }

      body > header .link.title {
        font-size: larger;
        font-variant: small-caps;
      }

      body > main {
        flex: 1 1 auto;
        overflow: auto;
      }
    </style>
  </head>
  <body>
    <header>
      <a href="#" class="link">One</a>
      <a href="#" class="link">Two</a>
      <a href="#" class="link">Three</a>
      <a href="#" class="link">Four</a>
      <a href="#" class="link">Five</a>
    </header>
    <main></main>
    <footer>Footer</footer>
  </body>
</html>

【讨论】：

我试过了，它确实有效，但我希望标题自动调整其高度以适应其内容。
您应该使用margin 而不是padding。您也不需要向<header> 添加填充/边距
如果我在页眉上使用边距，那么页眉会与文档的边缘分开，我不希望这样。
如果我在链接上使用边距，则底部边框不会越过链接的两侧。