Центральная навигационная панель - PullRequest
Новая
       8

Центральная навигационная панель

0 голосов
/ 24 октября 2019

Я создаю онлайн-резюме, и мне кажется, что моя панель навигации не выровняется по центру и не проходит по странице горизонтально. На данный момент вертикальное сидение слева от страницы. Во-вторых, как я могу применить флексбокс или сетку к моей панели навигации? 

#toolbar h3 {
    font-weight: bolder;
    font-style: italic;
    font-family: Baskerville;
    border: black;
    border-bottom-width: 100px;
    display: inline-flex;
    flex-direction: row;
    font-size: xx-large;
    text-transform: capitalize;
}

.nav{
    border:5px solid black;
    margin:0;
    padding:0;
    list-style-type: none;
   display: inline-block;
    flex-direction: column;
    color: black;
}


.nav li{
   display:flex;
    color: black;
    float: left;
}

.nav a{
    display:inline-block;
    padding:10px;
}

#toolbar{
    background-color: silver;
    overflow: hidden;
}
#toolbar a:hover {
    background-color: red;
    color: black;

}
<div id="toolbar">
    <p>
    <ul class="nav">
    <li><a href="#startAbout"><h3> About Me</h3></a></li>
    <li><a href="#startAcademic"><h3> Academic Profile</h3></a></li>
    <li><a href="#startExperience"><h3> Past Experience</h3></a></li>
</ul>
    </p>
</div>

1 Ответ

0 голосов
/ 24 октября 2019

Я вижу, что ваша панель навигации основана на тексте, а не на изображении. Я лично имел дело с этим на веб-странице моего текущего проекта. Я бы порекомендовал:

  1. Вместо использования неупорядоченных списков, сгруппируйте все элементы в один H3. Это позволит нам правильно выровнять ваш текст.

  2. Дайте этому h3 либо класс, либо идентификатор. (Если вы планируете использовать эту панель навигации где-то еще, может быть, на другой странице, используйте класс.) Это может быть что угодно. В этом примере я буду использовать navText.

  3. Затем добавьте следующий фрагмент кода в свой профиль CSS:

    .navText {text-align: center;}

Это должно решить проблему! Если это не так, попробуйте использовать элемент CSS align и установить его в центр.

Хорошего дня!

...