У меня есть этот код. < /p>
Код: Выделить всё
header nav ul {
display: flex;
list-style: none;
/* Removes the bullet points. */
}
/* I specifically targeted the `li` tag, beacuse it is the container contaning the `a` tags. */
header nav ul li {
flex: 1;
/* Makes the a tags take equal space. */
}< /code>
[list]
[*]About
[*]Skills
[*]Projects
[*]Contact
[/list]
< /code>
< /div>
< /div>
< /p>
Я работаю на простом бизнес -веб -сайте и создал навигационную панель с использованием HTML и CSS. Моя структура HTML состоит из
, содержащего элемент , который содержит неупорядоченный список (
) с четырьмя элементами списка (
), каждый содержит тег для навигационных ссылок: о, навыки, проекты и контакт. Я также установил стиль списка: нет; для удаления пулевых точек по умолчанию. Затем я специфически целевой заголовок Nav Ul li , потому что каждый является контейнером для тега , и я применял Flex: 1; , чтобы все ссылки занимают равное горизонтальное пространство. "О" ссылке. Я пытался изучить элементы, но я не могу понять, почему появляется это дополнительное пространство. Я прикрепил изображение, показывающее проблему для справки. src = "
https://i.sstatic.net/olt2cgt1.png"/>
Подробнее здесь:
https://stackoverflow.com/questions/797 ... of-my-page