<a> 元素的显示块答案

【问题标题】：Display block of <a> element<a> 元素的显示块
【发布时间】：2016-09-27 11:38:56
【问题描述】：

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

【问题讨论】：

欢迎来到 Stack Overflow。请检查：How do I ask a good question?

【解决方案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>

【讨论】：

谢谢！它对我有帮助:)
@zgrybus：如果这个或任何答案已经解决了您的问题，请考虑通过单击复选标记接受它。这向更广泛的社区表明您已经找到了解决方案，并为回答者和您自己提供了一些声誉。没有义务这样做。

【解决方案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>

【讨论】：