元素的显示块<a>

Question

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

http://jsfiddle.net/3vL13q1n/

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>