zgrybus zgrybus - 2 months ago 6
CSS Question

Display block of <a> element

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

Try this:

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