<a> 元素的显示块

Question

我对元素有疑问。我想让它成为 display: block 元素。问题是它不是从 <li> 元素继承 width 和 height。

Answer 1

试试这个：

* {
 box-sizing: border-box;
}

html{
 min-height: 100%;
}

body{
 width: 100%;
 background-color: #D8DBE2;
 color: #D8DBE2;
}

body, .navigation * {
 margin: 0px;
 padding: 0px;
}

.navigation{
 width: 100%;
 min-height: 70px;
 margin: 0px;
 padding: 0px;
 background-color: #181E1D;
}

.naviagation__list{
 display: flex;
 flex-flow: row wrap;
 justify-content: center;
 float: right;
 width: 55%;
 min-height: 70px;
}

.navigation__item{
 display: flex;
 justify-content: center;
 align-items: center;
 border: 1px solid white;
 width: 25%;
 min-height: 70px;
 list-style-type: none;
  text-align: center;
}

.navigation__link{
 display: inline-block;
 text-decoration: none;
 color: inherit;
  width: 100%;
  height: 100%;
  line-height: 70px;
}

<nav class="navigation">

    <ul class="naviagation__list">

        <li class="navigation__item">
            <a href="#" class="navigation__link"> Main page </a>
        </li>

        <li class="navigation__item">
            <a href="#" class="navigation__link"> About us </a>
        </li>

        <li class="navigation__item">
            <a href="#" class="navigation__link"> Products </a>
        </li>

        <li class="navigation__item">
            <a href="#" class="navigation__link"> Contact </a>
        </li>

    </ul>

</nav>

Answer 2

您应该使用：width: 100% 和 height: 100% 用于 <a>

* {
 box-sizing: border-box;
}

html{
 min-height: 100%;
}

body{
 width: 100%;
 background-color: #D8DBE2;
 color: #D8DBE2;
}

body, .navigation * {
 margin: 0px;
 padding: 0px;
}

.navigation{
 width: 100%;
 min-height: 70px;
 margin: 0px;
 padding: 0px;
 background-color: #181E1D;
}

.naviagation__list{
 display: flex;
 flex-flow: row wrap;
 justify-content: center;
 float: right;
 width: 55%;
 min-height: 70px;
}

.navigation__item{
 display: flex;
 justify-content: center;
 align-items: center;
 border: 1px solid white;
 width: 25%;
 min-height: 70px;
 list-style-type: none;
}

.navigation__link{
 display: block;
 text-decoration: none;
 color: inherit;
    width: 100%;
    height: 100%;
    padding-top: 22px
}

<nav class="navigation">

    <ul class="naviagation__list">

        <li class="navigation__item">
            <a href="#" class="navigation__link"> Main page </a>
        </li>

        <li class="navigation__item">
            <a href="#" class="navigation__link"> About us </a>
        </li>

        <li class="navigation__item">
            <a href="#" class="navigation__link"> Products </a>
        </li>

        <li class="navigation__item">
            <a href="#" class="navigation__link"> Contact </a>
        </li>

    </ul>

</nav>

<a> 元素的显示块

Display block of <a> element

html

css

block

flexbox

display