Как сдвинуть меню вправо или выровнить по центру
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Название документа</title> <style> #navbar { margin: 0; padding: 0; list-style-type: none; border: 2px solid #0066FF; border-radius: 20px 5px; width: 350px; text-align: center; background-color: #33ADFF; } #navbar li { display: inline; } #navbar a { color: #fff; padding: 5px 10px; text-decoration: none; font-weight: bold; display: inline-block; width: 100px; } #navbar a:hover { border-radius: 20px 5px; background-color: #0066FF; } </style> </head> <body> <ul id="navbar"> <li><a href="#">Телеграмм</a></li> <li><a href="Ссылка>Вконтакте</a></li> </ul> </body> </html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Название документа</title> <style> #navbar { margin: 0; padding: 0; list-style-type: none; border: 2px solid #0066FF; border-radius: 20px 5px; width: 360px; text-align: center; background-color: #73c7ee; } #navbar li { display: inline; } #navbar a { color: #fff; padding: 5px 10px; text-decoration: none; font-weight: bold; display: inline-block; width: 100px; } #navbar a:hover { border-radius: 20px 5px; background-color: #0066FF; } </style> </head> <body> |
2 ответа
от
cayla ,
13 дней назад
@GEROME
Чтобы выровнять меню по центру с помощью CSS, вы можете использовать свойство margin: 0 auto; на элементе с фиксированной шириной. Это свойство установит автоматические значения полей по левому и правому краю, тем самым центрируя блок.
В вашем случае, если вы хотите, чтобы ваш <ul> с идентификатором #navbar был по центру, ваше CSS-правило будет выглядеть следующим образом:
1 2 3 4 5 6 7 8 9 10 |
#navbar {
margin: 0 auto; /* Центрирование по горизонтали */
text-align: center; /* Выравнивание текста внутри меню по центру */
padding: 0;
list-style-type: none;
border: 2px solid #0066FF;
border-radius: 20px 5px;
width: 350px; /* Убедитесь, что ширина установлена */
background-color: #33ADFF;
}
|
Кроме этого, убедитесь, что у вас определена фиксированная ширина (width: 350px;), иначе центрирование работать не будет. Если вы хотите увидеть разницу, попробуйте изменить значение width. Например, если вы хотите, чтобы меню занимало всю ширину родительского элемента, вы можете установить width: 100%;, и центрирование уже не потребуется.
15