显示<a> element

Question

I have problem with element. I want to make it display: block element. The problem is that it is not inherit width and height from <li> element.

http://jsfiddle.net/3vL13q1n/

块

Answer 1

试试这个：

＆＃13;

＆＃13;

* {
	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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您应该对return (T)Row[Column];

使用：width: 100%和height: 100%

＆＃13;

＆＃13;

<a>

＆＃13;

* {
	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
}

＆＃13;

＆＃13;

＆＃13;