Как сделать полность блок ссылкой?

Question

Как сделать весь блок ссылкой? В блоке <nav> решил создать навигационное меню, для этого использовал flex-box. Свойство display: block; и width: 100%; height: 100%не работает. Не судите строго, я новичок.

nav{
    display: flex;
    justify-content: space-between;
    padding: 5px 10px;
    background-color: #293855;
    border-radius: 5px;
    margin: 10px 10px 30px 10px;
    color: #fff;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
}
nav a{
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
    text-decoration: none;
}
nav a:hover{
    color: #fff;
    text-decoration: none;
}
.header__section{
    display: flex;
    align-items: center;
}
.header__item{
    padding: 10px 10px;
}
.header__item:not(.headerlogo):hover{
    background-color: #337ab7;
    border-color: #2e6da4;
    border-radius: 5px;
}
.headerlogo{
    font-weight: 700;
}
.headerButton{
    cursor: pointer;
}

<nav>
    <div class="header__section">
        <div class="header__item headerlogo">TOAA Web</div>
        <div class="header__item headerButton"><a href="/">Главная</a></div>
    </div>
    <div class="header__section">
        <div class="header__item headerButton"><a href="/auth">Войти</a></div>
        <div class="header__item headerButton"><a href="/registration">Регистрация</a></div>
    </div>
</nav>

Answer 1

Можно сделать весь блок ссылкой.

nav{
    display: flex;
    justify-content: space-between;
    padding: 5px 10px;
    background-color: #293855;
    border-radius: 5px;
    margin: 10px 10px 30px 10px;
    color: #fff;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
   
}
nav a{
    color: #fff;
    text-decoration: none;
}
nav a:hover{
    color: #fff;
    text-decoration: none;
}
.header__section{
    display: flex;
    align-items: center;
}
.header__item{
    padding: 10px 10px;
}
.header__item:not(.headerlogo):hover{
    background-color: #337ab7;
    border-color: #2e6da4;
    border-radius: 5px;
}
.headerlogo{
    font-weight: 700;
}
.headerButton{
    cursor: pointer;
}

<nav>
    <div class="header__section">
        <div class="header__item headerlogo">TOAA Web</div>
        <a class="header__item headerButton" href="/"><span >Главная</span></a>
    </div>
    <div class="header__section">
        <a class="header__item headerButton" href="/auth"><span >Войти</span></a>
        <a class="header__item headerButton" href="/registration"><span >Регистрация</span></a>
    </div>
</nav>

БЛОГ НА HUSL

Как сделать полность блок ссылкой?

Ответы (1 шт):