CSS Padding overflowing parent

Question

Я пытаюсь сделать горизонтальную навигационную панель, и у меня она сидит в верхней части страницы, причем каждый из трех элементов списка заполняет треть пространства, все хорошо для этого. часть.

Проблема заключается в том, что я пытаюсь сделать тег привязки (который находится внутри элемента списка) заполнить все пространство элемента списка. Я установил его на display: block;, поэтому он занимает полную ширину, однако я не могу заставить его заполнить вертикальное пространство, как я этого хочу. Я могу использовать height: 100%, и он заполнит пространство, однако, если я сделаю так, текст тега привязки будет находиться в верхней части пространства списка, однако я хочу, чтобы он был вертикально центрирован. На это напомнили верхнюю и нижнюю прокладку, поэтому я попытался установить padding: 100%;. Когда это произошло, я больше не мог видеть текст привязанного тега. Перетаскивая пространство мышью, похоже, что тег занимает больше места, чем в элементе списка.

Это изображение навигационной панели с height: 100%;: Примечание: красные линии, окружающие каждую секцию являются границы, которые я установил видимым для просмотра границ

Соответствующий HTML-код выглядит следующим образом:

<ul class="main_nav"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Test page</a></li> 
    <li><a href="#">Test page 2</a></li> 
</ul> 

Соответствующий код CSS выглядит следующим образом:

body * { 
    font-family: Roboto sans-serif; 

    box-sizing: border-box; 

    border: solid 2px red; 
} 

header ul.main_nav { 
    background-color: gray; 
    color: #EBEBEB; 

    margin: 0px; 

    padding: 0px; 

    width: 100%; 
    height: 50px; 

    list-style-type: none; 
    list-style-position: inside; 

    overflow: hidden; 
} 

header ul.main_nav li { 
    text-align: center; 

    float: left; 

    width: calc(100%/3); 
    height: 100%; 
} 

header ul.main_nav li a { 
    display: block; 

    height: 100%; 

    text-decoration: none; 
} 

EDIT: Я предпочел бы не использовать фиксированные размеры, чтобы решить эту проблему, так как я в основном предпочитаю быть в состоянии изменить одно значение (50px для ул), чтобы настроить весь Navbar

Answer 1

вы можете сделать это с помощью Flexbox ,

*, 
 
*:before, 
 
*::after { 
 
    box-sizing: border-box; 
 
} 
 
body * { 
 
    font-family: Roboto sans-serif; 
 
    border: solid 2px red; 
 
} 
 
ul.main_nav { 
 
    background-color: gray; 
 
    color: #EBEBEB; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 50px; 
 
    list-style-type: none; 
 
    list-style-position: inside; 
 
    display: flex 
 
} 
 
ul.main_nav li { 
 
    flex: 1; 
 
    display: flex; 
 
    height:100%; 
 
} 
 
ul.main_nav li a { 
 
flex: 1; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    background: yellow 
 
}

<ul class="main_nav"> 
 
    <li><a href="#">Home</a> 
 
    </li> 
 
    <li><a href="#">Test page</a> 
 
    </li> 
 
    <li><a href="#">Test page 2</a> 
 
    </li> 
 
</ul>

, если вы собираетесь иметь одну строку только в меню, то вы можете использовать line-height см ниже

*, 
 
*:before, 
 
*::after { 
 
    box-sizing: border-box; 
 
} 
 
body * { 
 
    font-family: Roboto sans-serif; 
 
    border: solid 2px red; 
 
} 
 
ul.main_nav { 
 
    background-color: gray; 
 
    color: #EBEBEB; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 50px; 
 
    list-style-type: none; 
 
    list-style-position: inside; 
 
    overflow: hidden; 
 
    font-size: 0; 
 
} 
 
ul.main_nav li { 
 
    text-align: center; 
 
    width: calc(100%/3); 
 
    height: 100%; 
 
    display: inline-block; 
 
    font-size: 16px 
 
} 
 
ul.main_nav li a { 
 
    display: block; 
 
    height: inherit; 
 
    background: yellow; 
 
    text-decoration: none; 
 
    line-height: 32px /*this should be the same value has the parent height*/ 
 
}

<ul class="main_nav"> 
 
    <li><a href="#">Home</a> 
 
    </li> 
 
    <li><a href="#">Test page</a> 
 
    </li> 
 
    <li><a href="#">Test page 2</a> 
 
    </li> 
 
</ul>