#html #css
Вопрос:
Поэтому я создаю эту панель навигации, но у меня возникли некоторые проблемы с выравниванием элементов, позже на странице также появятся значки svg в этой панели навигации. Но я пытаюсь выровнять его вот так, но как?
Вероятно, это очень легко исправить, но я пытался выровнять по вертикали и другие вещи, но они не перемещаются туда, куда я хочу.
/* Navigation */ .topnav { overflow: hidden; background: none !important; } .topnav button { border: none; cursor: pointer; } .topnav a { color: #0f1; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .floatLeft { float: left; } .floatRight { float: right; } .topnav a:hover { color: #000; } .topnav a.active { color: #000; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Grundfos Metrics</title> <link href="https://fonts.googleapis.com/css?family=Montserrat:600" rel="stylesheet"> <link rel="stylesheet" href="./css/site.scss"> <script type="text/javascript" src="./js/toggletheme.js" defer></script> </head> <body> <header> <div class="topnav"> <a class="floatLeft" href="#news"><h1>Website Title</h1></a> <a class="floatRight" href="#contact">Coverage</a> <a class="floatRight" href="#news">Archives</a> <a class="active floatRight" href="#home">Home</a> </div> </header> </body> </html> Комментарии:
1. Удалите все поплавки и создайте это с помощью flexbox, это значительно облегчит вашу жизнь.
2. Помните, что h1 поставляется с полем по умолчанию в HTML. Переопределите его, установив значение поля 0 пикселей. Но я согласен с клонированным. Должно быть проще с flexbox
3. Вы должны научиться
flexтому, что это значительно облегчает создание подобных вещей. Если вы хотите, я могу сделать вашу навигационную панель с помощью flex?
Ответ №1:
Для этого вы можете использовать flexbox.
Просто добавьте display: flex; и align-items: center; к .topnav этому .
И чтобы выровнять содержимое слева или справа, вы можете использовать два контейнера и a justify-content: space-between; на .topnav .
Это приведет к выравниванию первого контейнера по самому левому краю, а второго-по самому правому.
Но если вы добавите еще один контейнер, середина будет посередине ! А два других будут на том же месте, что и раньше
Выравнивание правой части с помощью flex также приведет к изменению порядка элементов в обратном порядке ! Так что не забудьте изменить и это тоже.
Я сделал пример для вашей навигационной панели, не стесняйтесь спрашивать, понимаете ли вы мое решение.
/* Navigation */ .topnav { overflow: hidden; background: none !important; display: flex; align-items: center; justify-content: space-between; } .topnav button { border: none; cursor: pointer; } .topnav a { color: #0f1; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .topnav a:hover { color: #000; } .topnav a.active { color: #000; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Grundfos Metrics</title> <link href="https://fonts.googleapis.com/css?family=Montserrat:600" rel="stylesheet"> <link rel="stylesheet" href="./css/site.scss"> <script type="text/javascript" src="./js/toggletheme.js" defer></script> </head> <body> <header> <div class="topnav"> <div class="leftpart"> <a href="#news"><h1>Website Title</h1></a> </div> <div class="rightpart"> <a href="#contact">Coverage</a> <a href="#news">Archives</a> <a class="active" href="#home">Home</a> </div> </div> </header> </body> </html> Ответ №2:
Попробуйте добавить это в свой css.
.topnav a { line-height:17px; } Ответ №3:
.topnav { overflow: hidden; background: none !important; display: flex; justify-content: space-between; align-items: center; } .topnav a { color: #0f1; padding: 14px 16px; text-decoration: none; font-size: 17px; } .topnav a h1 { margin: 0; } .topnav a:hover { color: #000; } .topnav a.active { color: #000; } <body> <header> <div class="topnav"> <div> <a href="#news"> <h1>Website Title</h1> </a> </div> <div> <a class="active" href="#home">Home</a> <a href="#news">Archives</a> <a href="#contact">Coverage</a> </div> </div> </header> </body> В этом случае вам нужно использовать flexbox, сначала вы удаляете весь CSS с плавающей точкой и его класс, а затем используете flexbox, чтобы использовать два разных раздела для первого логотипа и второй ссылки.