顯示塊<a>元素

我有元素的問題。我想使它成爲display: block元素。問題在於它不是從<li>元件繼承width和height。顯示塊<a>元素

2016-09-27 qwerty1234567

歡迎堆棧溢出。請檢查此：我如何問一個很好的問題？（http://stackoverflow.com/help/how-to-ask） –

試試這個：

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

來源

2016-09-27 11:53:26 Fralec

謝謝！它幫助我:) – qwerty1234567

@zgrybus：如果這或任何回答已經解決了您的問題，請考慮點擊複選標記接受它。這向更廣泛的社區表明，您已經找到了解決方案，併爲答覆者和您自己提供了一些聲譽。沒有義務這樣做。 – Fralec

..完成:) .......... – qwerty1234567

您應該使用：width: 100%和height: 100%爲<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>

來源

2016-09-27 11:53:35

顯示塊<a>元素

回答

相關問題