Как сделать навигацию такого типа?

282
17 июля 2018, 22:10

Есть обычная навигация

Как с помощью стилей сделать так,чтобы 1 и 2 кнопки были сверху,а 3 и 4 кнопки были под ними. Т.е разделить эту панель на 2 строки.

<ul id="pc">
        <li class="pcNav" title="Приветствие"><label for="tab1" role="button"><br><span>Приветствие</span></label></li>
        <li class="pcNav" title="Услуги"><label for="tab2" role="button"><br><span>Услуги</span></label></li>
        <li class="pcNav" title="Клиенты"><label for="tab3" role="button"><br><span></span>Клиенты</label></li>
        <li class="pcNav" title="Вакансии"><label for="tab4" role="button"><br><span>Вакансии</span></label></li>
      </ul>
Answer 1

Всё, что потребуется — флекс-контейнер с переносом элементов.

* { 
  box-sizing: border-box; 
} 
 
#pc { 
  display: flex; 
  flex-wrap: wrap; 
  list-style-type: none; 
  padding: 0; 
  margin: 0; 
} 
 
.pcNav { 
  flex-basis: 50%; 
  border: 1px solid; 
}
<ul id="pc"> 
  <li class="pcNav" title="Приветствие"><label for="tab1" role="button"><br><span>Приветствие</span></label></li> 
  <li class="pcNav" title="Услуги"><label for="tab2" role="button"><br><span>Услуги</span></label></li> 
  <li class="pcNav" title="Клиенты"><label for="tab3" role="button"><br><span></span>Клиенты</label></li> 
  <li class="pcNav" title="Вакансии"><label for="tab4" role="button"><br><span>Вакансии</span></label></li> 
</ul>

Answer 2

Правильно? 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
#pc {
  display: block;
}
#pc > ul {
  display: block;
}
#pc > ul > li {
  display: block;
  background: #ccc;
  margin-bottom: 5px;
}
#pc > ul > li > ul, #pc > ul > li > ul > li {
  display: inline-block;
}
    </style>
</head>
<body>





<div id="pc">
<ul>
    <li>
        <ul>
             <li class="pcNav" title="Приветствие"><label for="tab1" role="button"><br><span>Приветствие</span></label></li>
             <li class="pcNav top" title="Услуги"><label for="tab2" role="button"><br><span>Услуги</span></label></li>
        </ul>
    </li>
       <li>
        <ul>
        <li class="pcNav" title="Клиенты"><label for="tab3" role="button"><br><span></span>Клиенты</label></li>
        <li class="pcNav top" title="Вакансии"><label for="tab4" role="button"><br><span>Вакансии</span></label></li>
        </ul>
       </li>
  </ul> 
</div>

</body>
</html>
READ ALSO
Не могу понять как передаются аргументы
javascript

Не могу понять как передаются аргументы

Изучаю javascriptЕсть код

 182
Как вызвать success callback
javascript

Как вызвать success callback

Я пишу метод save обьекта user который должен иметь в себе ивенты success и error (это ивенты?)

 173
глобальная переменная
javascript

глобальная переменная

создаю глобальную переменную dev и локальную, внутри функции, почему ругается на "не определение" глобальной переменной? ведь если создам глобальную...

 202
Изменить значение свойства left
javascript

Изменить значение свойства left

Прошу помочь с информацией по несложному вопросуЕсть разметка:

 188