Как выровнять логотип рядом с навигацией?

#html #css #navigation #alignment

#HTML #css #навигация #выравнивание

Вопрос:

Вот как это выглядит:

Как мне правильно выровнять навигацию по вертикали с логотипом?

HTML:

 <div class="menu-nav">
<ul>
<li><a href="" title="" class="logo">Logo</a></li>
<li><a href="" title="" class="mg">Home</a></li>
<li><a href="" title="" class="mg">Chat Now</a></li>
<li><a href="" title="" class="mg">Mobile Chat</a></li>
<li><a href="" title="" class="mg">Report User</a></li>
</ul>
</div>

CSS:

 .menu-nav {

}

.menu-nav ul li {
display: inline-block;
}

.menu-nav ul li a{
color: #fff;
margin: 10px;
}

.menu-nav ul a.mg {

 }

.menu-nav ul li a.logo {
background: url("../img/logo.png") no-repeat;
text-indent: -9999px;
height:60px;
display:block;
width:215px;
padding: 0;
}

1. Добро пожаловать в SO 🙂 Это модерация вашего первого вопроса, и мне не на что жаловаться. Позвольте мне встроить эту картинку для вас.

2. Что вы подразумеваете под «правильным выравниванием»? У вас есть набросок того, как бы вы хотели, чтобы выглядел ваш заголовок?

3. Я уже исправил это с помощью BuddhistBeast, но спасибо вам! 🙂

4. Вы также можете решить эту проблему, используя margin-top или padding-top для элементов списка без логотипа

Ответ №1:

Вы можете добавить метод отображения с именем table в тег ul, а затем включить метод отображения table-cell с vertical-align:middle , чтобы эффективно выровнять ссылки на логотип по вертикали.

HTML:

 <div class="menu-nav">
    <ul class="a">
        <li><a href="" title="" class="logo">Logo</a>
        </li>
        <li class="navItem"><a href="" title="" class="mg">Home</a>
        </li>
        <li class="navItem"><a href="" title="" class="mg">Chat Now</a>
        </li>
        <li class="navItem"><a href="" title="" class="mg">Mobile Chat</a>
        </li>
        <li class="navItem"><a href="" title="" class="mg">Report User</a>
        </li>
    </ul>
</div>

CSS:

 .a{
    display:table;
}
.a li{
    display: table-cell;
    vertical-align:middle;
}

Что лучше видно через этот JSFiddle

Редактировать:

Вы можете обновить поля, присвоив тегам li класс и вызвав этот конкретный класс. Это также можно найти в JSFiddle выше, и вы также можете немного поиграть с этим.

1. Действительно полезно и эффективно спасибо, еще одна быстрая вещь, как бы мне использовать поля конкретно для ссылок, не мешая самому логотипу?

2. @Jack_Saurus Вы можете использовать .mg или .menu-nav li:not(.logo)

Ответ №2:

Пожалуйста, попробуйте приведенный ниже код, который я только что добавил line-height:60px; для .menu-nav ul li a

HTML :

 <div class="menu-nav">
<ul>
<li><a href="" title="" class="logo">Logo</a></li>
<li><a href="" title="" class="mg">Home</a></li>
<li><a href="" title="" class="mg">Chat Now</a></li>
<li><a href="" title="" class="mg">Mobile Chat</a></li>
<li><a href="" title="" class="mg">Report User</a></li>
</ul>
</div>

CSS:

 .menu-nav {

}

.menu-nav ul li {
display: inline-block;
}

.menu-nav ul li a{
color: #fff;
margin: 10px;
line-height:60px;
}

.menu-nav ul a.mg {

 }

.menu-nav ul li a.logo {
background: url("../img/logo.png") no-repeat;
text-indent: -9999px;
height:60px;
display:block;
width:215px;
padding: 0;
}