时间戳

首页 > 解决方案 > 标签和

在 flex 容器中有不同的高度和对齐方式

html - 标签和

在 flex 容器中有不同的高度和对齐方式

问题描述

我正在为博客页面构建一个底部导航。在导航中，您可以选择导航到最后一个博客条目、博客主页/索引和下一篇博客文章。如果您在第一篇或最后一篇博文中，而不是呈现一个<a>我正在呈现一个<p>带有文本的文本，表明没有更多的帖子。我之所以选择这种方法，是因为渲染一个不活动的链接显然会令人困惑（可访问性）。

我遇到的问题是锚元素（或元素本身）中的文本与段落元素的高度略有不同——相差 3px。我会附上一张图片以供参考。手动设置元素的高度以使它们匹配似乎不可取。我尝试过使用填充和边距，尽管检查器没有显示填充或边距。我还手动设置了<p>元素的高度以匹配元素的高度，<a>但这会使对齐方式变得时髦。任何想法为什么会这样？我尝试了一些创造性的谷歌搜索，但我没有得到任何相关的东西。

问题照片：注意前两个元素（锚元素）上方和下方的空白以及最后一个元素下方的空白，即段落元素。 水平导航包含 3 个元素，其中前两个是锚标签，分别链接到最后一篇博文和博文索引。 最后一个元素是段落元素，而不是禁用的锚标记。 前两个元素的上方和下方都有空格，而段落元素下方只有空格。 此外，锚元素出现在同一水平轴上，而最后一个元素未在同一轴上正确居中。

相关代码：（请注意<Link>元素呈现为<a>元素。）

<footer className='blog-post-footer'>
  <nav>
    <ul>
      <li>
        {previous ? (
          <Link to={`../${previous.frontmatter.slug}`} rel='prev'>
            ← {previous.frontmatter.title}
          </Link>
        ) : (
           <p>You're on the first post.</p>
         )}
       </li>
       <li>
         <Link to='/blog'>
           Blog Home
         </Link>
       </li>
       <li>
         {next ? (
           <Link to={`../${next.frontmatter.slug}`} rel='next'>
             {next.frontmatter.title} →
           </Link>
        ) : (
          <p>No next post...yet.</p>
        )}
      </li>
    </ul>
  </nav>
</footer>

和CSS：

.blog-post-footer {
  box-sizing: border-box;
  text-align: center;
}

.blog-post-footer ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  padding: 0;
}

.blog-post-footer nav p {
  margin: 0;
  padding: 0;
  height: 23px;
}

.blog-post-footer a,
.blog-post-footer nav p {
  color: #65def1;
  background-color: red;
  display: inline-block;
}

以及如何呈现的图像（Firefox）： 这是没有过多元素的渲染元素的更新图像。

标签： htmlcssreactjs

解决方案

好的，所以这里的问题是行高的 CSS 规则冲突。我在 global.css 中设置了自己的行高，但它被我的 normalize.css 覆盖。简而言之，如果您遇到类似的问题，尤其是文本元素，请务必检查您的行高。

推荐阅读