Центрирование ссылок в горизонтальной панели навигации - PullRequest
Новая
       6

Центрирование ссылок в горизонтальной панели навигации

0 голосов
/ 05 марта 2019

Первый раз возиться с сеткой.Вот что у меня есть:

http://fordsseafoodrockhall.com/marina/index.html#

Мой вопрос: как центрировать ссылки в моей горизонтальной навигационной панели?Как видно, у меня осталось немного свободного места справа, а я слева.

HTML: 

<div class="row">
    <div class="twelve columns">
        <ul class="nav-bar">
          <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Marina</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Amenities</a></li>
            <li><a href="#">Activities</a></li>
            <li><a href="#">Photos</a></li>
            <li><a href="#">Yacht Club</a></li>
            <li><a href="#">Directions</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>

    </div>

CSS: 

.nav-bar {
height: 40px;
background: #435d78;
margin-top: 20px;
padding: 0;
color: #fff;
text-align:center; }

1 Ответ

0 голосов
/ 05 марта 2019

Добавьте это к существующему коду: 

.nav-bar {
    display: flex;
}

.nav-bar > li.active {
    flex-grow: 1;
}

Свойство flex-grow распределяет свободное пространство между элементами-братьями и сестрами с примененным свойством.

Set display: flex на родительском элементе, чтобы разрешить использование свойств flex.

...