Anzeigeblock von <a> Element

Question

Ich habe ein Problem mit Element. Ich möchte es display: block Element machen. Das Problem ist, dass es nicht width und height von <li> Element erben.

http://jsfiddle.net/3vL13q1n/

Answer 1

Versuchen Sie folgendes:

* { 
 
\t box-sizing: border-box; 
 
} 
 

 
html{ 
 
\t min-height: 100%; 
 
} 
 

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

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

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

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

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

 
.navigation__link{ 
 
\t display: inline-block; 
 
\t text-decoration: none; 
 
\t 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

Sie verwenden sollten: width: 100% und height: 100% für <a>

* { 
 
\t box-sizing: border-box; 
 
} 
 

 
html{ 
 
\t min-height: 100%; 
 
} 
 

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

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

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

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

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

 
.navigation__link{ 
 
\t display: block; 
 
\t text-decoration: none; 
 
\t 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>