#html #css #flexbox
Вопрос:
Я пытаюсь создать веб-страницу блога в учебнике HTML CSS и не могу найти способ сделать навигационную панель идентичной. Вот панель навигации: 
Я не знаю, как отделить логотип слева от группы значков справа. Я пытался использовать Flex, но не могу понять, как его правильно использовать.
header img { height: 40px; margin-left: 40px; } header { background-color: white; position: fixed; top: 0; left: 0; right: 0; height: 80px; } body { background-color: aliceblue; } header * { display: inline; } header li { justify-content: center; margin: 20px; } header li a { color: black; text-decoration: none; } lt;link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material Icons"gt; lt;headergt; lt;img src="C:UserseliosOneDriveDocumentsHTML_classesMy_blog_projectlogo.png" alt=""gt; lt;navgt; lt;ulgt; lt;ligt;lt;a href=""gt;lt;i class="material-icons"gt;searchlt;/igt;lt;/agt;lt;/ligt; lt;ligt;lt;a href=""gt;lt;i class="material-icons"gt;listlt;/igt;lt;/agt;lt;/ligt; lt;ligt;lt;a href=""gt;lt;i class="material-icons"gt;notificationslt;/igt;lt;/agt;lt;/ligt; lt;ligt;lt;a href=""gt;lt;buttongt;Upgradelt;/buttongt;lt;/agt;lt;/ligt; lt;ligt; lt;a href=""gt; lt;div id="circle"gt;lt;/divgt; lt;/agt; lt;/ligt; lt;/ulgt; lt;/navgt; lt;/headergt; Если у вас есть какие-либо советы или предложения, было бы здорово, что я начинаю, и это заставляет меня много бороться. Заранее спасибо, ребята!
Ответ №1:
Вам просто нужно использовать display: flex; align-элементы: по центру; со стилем заголовка, который будет выглядеть так
header { background-color: white; position: fixed; top: 0; left: 0; right: 0; height: 80px; display: flex; align-items: center; } а также нужно добавить CSS в стиле навигации, который будет выглядеть так
header nav{ margin-left: auto; display: flex; align-items: center; } Полный код
header img{ height: 40px; margin-left: 40px; } header { background-color: white; position: fixed; top: 0; left: 0; right: 0; height: 80px; display: flex; align-items: center; } header nav{ margin-left: auto; display: flex; align-items: center; } body{ background-color: aliceblue; } header * { display: inline; } header li{ justify-content: center; margin: 20px; } header li a { color: black; text-decoration: none; lt;!DOCTYPE htmlgt; lt;html lang="en"gt; lt;headgt; lt;meta charset="UTF-8"gt; lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt; lt;meta http-equiv="X-UA-Compatible" content="ie=edge"gt; lt;titlegt;My bloglt;/titlegt; lt;link rel="stylesheet" href="style.css"gt; lt;link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material Icons"gt; lt;/headgt; lt;bodygt; lt;headergt; lt;img src="https://assets.hongkiat.com/uploads/psd-text-svg/logo-example.jpg" alt=""gt; lt;navgt; lt;ulgt; lt;ligt;lt;a href=""gt;lt;i class="material-icons"gt;searchlt;/igt;lt;/agt;lt;/ligt; lt;ligt;lt;a href=""gt;lt;i class="material-icons"gt;listlt;/igt;lt;/agt;lt;/ligt; lt;ligt;lt;a href=""gt;lt;i class="material-icons"gt;notificationslt;/igt;lt;/agt;lt;/ligt; lt;ligt;lt;a href=""gt;lt;buttongt;Upgradelt;/buttongt;lt;/agt;lt;/ligt; lt;ligt;lt;a href=""gt;lt;div id="circle"gt;lt;/divgt;lt;/agt;lt;/ligt; lt;/ulgt; lt;/navgt; lt;/headergt; lt;/bodygt; lt;/htmlgt; Ответ №2:
Вы можете использовать display: flex заголовок (вертикальное выравнивание по align-items желанию), а для перемещения логотипа и навигации влево и вправо просто добавьте margin-left: auto nav , чтобы переместить его настолько вправо, насколько позволяет его содержимое.
( margin-right: auto кстати, логотип достиг бы того же результата)
header img { height: 40px; margin-left: 40px; } header { background-color: white; position: fixed; top: 0; left: 0; right: 0; height: 80px; display: flex; align-items: center; } body { background-color: aliceblue; } header * { display: inline; } header li { justify-content: center; margin: 20px; } header li a { color: black; text-decoration: none; } nav { margin-left: auto; } lt;link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material Icons"gt; lt;headergt; lt;img src="C:UserseliosOneDriveDocumentsHTML_classesMy_blog_projectlogo.png" alt="(logo)"gt; lt;navgt; lt;ulgt; lt;ligt;lt;a href=""gt;lt;i class="material-icons"gt;searchlt;/igt;lt;/agt;lt;/ligt; lt;ligt;lt;a href=""gt;lt;i class="material-icons"gt;listlt;/igt;lt;/agt;lt;/ligt; lt;ligt;lt;a href=""gt;lt;i class="material-icons"gt;notificationslt;/igt;lt;/agt;lt;/ligt; lt;ligt;lt;a href=""gt;lt;buttongt;Upgradelt;/buttongt;lt;/agt;lt;/ligt; lt;ligt; lt;a href=""gt; lt;div id="circle"gt;lt;/divgt; lt;/agt; lt;/ligt; lt;/ulgt; lt;/navgt; lt;/headergt; Ответ №3:
Вы можете сделать это с помощью Flex, дайте вашему основному div дисплей: сгибайте и выравнивайте-содержимое: пробел, чтобы между вашим логотипом и другими навигационными элементами было пространство, а затем выровняйте-элементы: по центру, чтобы каждый элемент был выровнен по горизонтали одинаково.
lt;link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material Icons"gt; lt;headergt; lt;img src="C:UserseliosOneDriveDocumentsHTML_classesMy_blog_projectlogo.png" alt="(logo)"gt; lt;navgt; lt;ulgt; lt;ligt;lt;a href=""gt;lt;i class="material-icons"gt;searchlt;/igt;lt;/agt;lt;/ligt; lt;ligt;lt;a href=""gt;lt;i class="material-icons"gt;listlt;/igt;lt;/agt;lt;/ligt; lt;ligt;lt;a href=""gt;lt;i class="material-icons"gt;notificationslt;/igt;lt;/agt;lt;/ligt; lt;ligt;lt;a href=""gt;lt;buttongt;Upgradelt;/buttongt;lt;/agt;lt;/ligt; lt;ligt; lt;a href=""gt; lt;div id="circle"gt;lt;/divgt; lt;/agt; lt;/ligt; lt;/ulgt; lt;/navgt; lt;/headergt; CSS
header img { height: 40px; margin-left: 40px; } header { background-color: white; display: flex; justify-content: space-between; align-items: center } body { background-color: aliceblue; } header * { display: inline; } header li { justify-content: center; margin: 20px; } header li a { color: black; text-decoration: none; }