0
요소에 문제가 있습니다. 나는 그것을 display: block 요소로 만들고 싶다. 문제는 그것이 width 및 height에서 <li> 요소를 상속받지 않는다는 것입니다.디스플레이 블록이 <a> 인 요소
A
답변
0
이 시도 :
* {
\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>+0
고마워! 그것은 나를 도와줍니다 :) – qwerty1234567
+0
@zgrybus :이 답변이나 어떤 질문을 해결했다면 체크 표시를 클릭하여 그것을 수락하는 것을 고려하십시오. 이는 해결책을 찾았으며 응답자와 자신에게 어느 정도의 평판을 제공한다는 것을 더 넓은 커뮤니티에 나타냅니다. 이를 수행 할 의무는 없습니다. – Fralec
+0
.. 완료 :) .......... – qwerty1234567
0
당신은 사용해야합니다 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>
스택 오버플로에 오신 것을 환영합니다. 이것을 확인하십시오 : [어떻게 좋은 질문을합니까?] (http://stackoverflow.com/help/how-to-ask) –