Question

我有一些链接需要占用他们可用高度的100％，不幸的是我无法正常工作

JSFiddle版本（您可以自己尝试）：JSFiddle With Same Exact Code

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: rgb(220, 220, 220);
}

nav span {
    display: inline-block;
}

nav {
    background-color: #ED2939;
}

nav h1 {
    background-color: blue;
}

nav a {
    background-color: blue;
    color: white;
    display: inline-block;
    height: 100%;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="CSS/styles.css">
    <title>Document</title>
</head>

<body>
    <nav>
        <span>
            <h1>My Page</h1>
        </span>
        <a href="#">Home</a>
        <a href="#">More</a>
        <a href="#">About</a>
    </nav>
</body>

</html>

如您所见，尽管具有display: inline-block和height: 100%，链接仍不会占用100％的空间，如何在不对值进行硬编码或使用填充的情况下做到这一点？然后，将文本垂直居中？

Answer 1

仅出于清除目的，为什么您的CSS无法正常工作：

使用百分比height是相对于元素父级的。如果父元素（在您的情况下nav没有设置高度），则元素的高度（在您的情况下nav a）默认为 auto 。

因此，为了使您的示例正常工作，您需要将nav的高度设置为某个非百分比固定值，例如 28px 。但是，您的内联块元素将出现对齐问题，并且在该元素之前会出现自然的可见空间。

如上所述，请坚持使用 display：flex -在此处A Complete Guide to Flexbox或（已过时）display: block; float: left;和一套line-height阅读通俗易懂的指南。

Answer 2

这些是对代码进行的编辑

nav {
    background-color: #ED2939;
    display:flex;
}
nav a {
    background-color: blue;
    color: white;
    display: flex;
    align-items: center;
}

摘要

设置“导航”和“ a”以弯曲并对齐中心的“ a”元素。

JSFiddle：https://jsfiddle.net/b9aergwu/

如何使元素占据其父级空间的100％？

2 个答案: