Не могу правильно расположить навигационную панель

0

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

Вот что я получил

HTML:

<header>
   <nav>
     <ul>
        <li><a href="smartphones.php">Smartphones</a></li>
        <li><a href="tablets.php">Tablets</a></li>
     </ul>
     <ul>
        <li><img src="logo.png" alt="Logo" height="80" width="80" /></li>
     </ul>       
     <ul>   
        <li><a href="laptops.php">Laptops</a></li>
        <li><a href="desktops.php">Desktops</a></li>    
     </ul>
  </nav>    
</header>

CSS:

header {
    width: 100%;
    height: 80px;
    background-color: #FFF;
}

nav {
    height:80px;
    width:1000px;
    margin: 0 auto;
}

nav ul {
    width: 33.33%;
    margin:0 auto;
    float: left;
}

nav ul  li{
    display:inline;
}

Что это дает, можно найти здесь http://e2-repair.be/

Edit: Обратите внимание, что я пробовал много вещей, поэтому то, что я получил прямо сейчас, может выглядеть довольно немым или каким-либо другим, но это самое близкое, что я получил до сих пор

  • 0
    Вы пытались добавить <center> для логотипа? Кажется, все в порядке (конечно, их позиция не точна - слева направо)
  • 0
    @fiskerXO <center> устарел. text-align: center должен быть использован вместо.
Показать ещё 9 комментариев
Теги:

5 ответов

0
Лучший ответ

Попробуйте, если это поможет вам

nav {
    text-align:center;
}
nav ul {
    width: 33.33%; //remove this line
    margin: 0; //change margin to 0
    float: left; //remove this line
    display: inline-block;
    vertical-align: middle; // to vertically align in center
}

nav ul  li{
    display:inline-block; // change inline to inline-block
}
Поделиться
  • 0
    Это добилось цели. Не могли бы вы вкратце объяснить, почему это сработало? В образовательных целях :) Большое спасибо
  • 0
    @ user3442845 в своих стилях вы пытались указать width и переместили ее left чтобы все div правильно складывались. Но когда вы float его left , ul будет принимать только height содержимого. Когда вы создаете этот inline-block , он назначит элементу два аспекта, один - сделать их inline а другой - block (когда он сделан блоком, он принимает height родителя). Теперь, когда все элементы принимают height родительского элемента, вы можете легко выровнять его по вертикали.
Показать ещё 1 комментарий
1

Попробуй это:

nav {
    text-align: center;
}
nav > ul {
    display: inline-block;
}
nav > ul:first-child {
    float: left;
}
nav > ul:last-child {
    float: right;
}
Поделиться
0

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

Поделиться
0

Попробуй это:

nav:after {
    content: "";
    display: inline-block;
    width: 100%;
}
nav {
    text-align: justify;
}
nav ul {
    display: inline-block;
    vertical-align: middle; /* Or whatever you like: top, bottom, baseline, ... */
}

Это трюк, чтобы оправдать последнюю строку элемента (в данном случае единственную строку).

Поделиться
0

ПРОВЕРЬТЕ ЭТУ FIDDLE http://jsfiddle.net/luckmattos/327BL/

  1. Я удаляю пару <ul> и использую только один.
  2. Добавлен класс в <li class="logo">.
  3. Незначительные изменения в css, проверка скрипта.
  4. Обязательно настройте ширину <ul> соответствии с вашим контентом.

Надеюсь, поможет.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню