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