#html #css
Вопрос:
Панель навигации расположена по центру и горизонтально, но при ширине 1024 пикселей она была выровнена, но средний список увеличился, когда я настроил экран на 640 пикселей или ниже. Я попытался изменить размер ширины и высоты элементов на панели навигации, но ни один из них не сработал. Пожалуйста, помогите мне.
@media screen and (max-width:640px) { header { border-style: solid; color: black; } h1, h2, h3, section { text-align: center; } nav { text-align: center; } ul { text-align: center; float: left; width: 100%; padding: 0; list-style-type: none; } ul li { display: inline; } a { display: inline-block; width: 150px; height: 35px; text-decoration: none; color: white; background-color: #808080; border: 1px solid black; } a:hover { background-color: black; } } lt;!DOCTYPE htmlgt; lt;html lang="en"gt; lt;headgt; lt;titlegt; General info lt;/titlegt; lt;link href="Desktop.css" rel="stylesheet" /gt; lt;link href="Mobile.css" rel="stylesheet" /gt; lt;meta charset="utf-8" /gt; lt;meta name="description" content="Web Development" /gt; lt;meta name="keywords" content="HTML and CSS" /gt; lt;meta name="author" content="Author" /gt; lt;meta name="viewport" content="width=device- width, initial-scale=1"gt; lt;/headgt; lt;bodygt; lt;divgt; lt;headergt; lt;h1gt; DTD lt;/h1gt; lt;/headergt; lt;/divgt; lt;divgt; lt;navgt; lt;ulgt; lt;li class="divnav"gt; lt;a href="Generalinfo.html"gt; General information lt;/agt; lt;/ligt; lt;li class="divnav"gt; lt;a href="Favourites.html"gt; Achievement and favourites lt;/agt; lt;/ligt; lt;li class="divnav"gt; lt;a href="Schedule.html"gt; Study schedule lt;/agt; lt;/ligt; lt;/ulgt; lt;/navgt; lt;/divgt; lt;/bodygt; lt;/htmlgt; Ответ №1:
Используйте flexbox на своем ul
header { border-style: solid; color: black; } h1, h2, h3, section { text-align: center; } nav { text-align: center; } ul { text-align:center; display:flex; align-items:center; justify-content: center; width:100%; padding:0; list-style-type:none; } ul li:not(:last-of-type) { margin-right: 5px } ul li{ display: inline; } a { display: inline-block; width: 150px; height: 35px; text-decoration:none; color:white; background-color:#808080; border: 1px solid black; } a:hover { background-color: black; } lt;!DOCTYPE htmlgt; lt;html lang="en"gt; lt;headgt; lt;titlegt; General info lt;/titlegt; lt;link href="Desktop.css" rel="stylesheet" /gt; lt;link href="Mobile.css" rel="stylesheet" /gt; lt;meta charset="utf-8" /gt; lt;meta name="description" content="Web Development" /gt; lt;meta name="keywords" content="HTML and CSS" /gt; lt;meta name="author" content="Author" /gt; lt;meta name="viewport" content="width=device- width, initial-scale=1"gt; lt;/headgt; lt;bodygt; lt;divgt; lt;headergt; lt;h1gt; DTD lt;/h1gt; lt;/headergt; lt;/divgt; lt;divgt; lt;navgt; lt;ulgt; lt;li class="divnav"gt; lt;a href="Generalinfo.html"gt; General information lt;/agt; lt;/ligt; lt;li class="divnav"gt; lt;a href="Favourites.html"gt; Achievement and favourites lt;/agt; lt;/ligt; lt;li class="divnav"gt; lt;a href="Schedule.html"gt; Study schedule lt;/agt; lt;/ligt; lt;/ulgt; lt;/navgt; lt;/divgt; lt;/bodygt; lt;/htmlgt; Комментарии:
1. добро пожаловать @TuanDat
Ответ №2:
Вы можете использовать flexbox nav и дальше ul
nav { display: flex; justify-content: center; align-items: center; } ul { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; width: 100%; padding: 0; list-style-type: none; } @media screen and (max-width:640px) { header { border-style: solid; color: black; } h1, h2, h3, section { text-align: center; } nav { display: flex; justify-content: center; align-items: center; } ul { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; width: 100%; padding: 0; list-style-type: none; } ul li { display: inline; } a { display: inline-block; width: 150px; height: 35px; text-decoration: none; color: white; background-color: #808080; border: 1px solid black; } a:hover { background-color: black; } lt;divgt; lt;headergt; lt;h1gt; DTD lt;/h1gt; lt;/headergt; lt;/divgt; lt;divgt; lt;navgt; lt;ulgt; lt;li class="divnav"gt; lt;a href="Generalinfo.html"gt; General information lt;/agt; lt;/ligt; lt;li class="divnav"gt; lt;a href="Favourites.html"gt; Achievement and favourites lt;/agt; lt;/ligt; lt;li class="divnav"gt; lt;a href="Schedule.html"gt; Study schedule lt;/agt; lt;/ligt; lt;/ulgt; lt;/navgt; lt;/divgt; Ответ №3:
Используйте это вместо float: left;
ul { display: flex; justify-content: space-around; } Ответ №4:
Как насчет использования display: grid , а затем установки ширины каждого столбца ( grid-template-columns: 1fr 1fr 1fr; )?
Удалили @media screen and (max-width:640px) { , чтобы результат был виден при любой ширине экрана, пожалуйста, игнорируйте только эту часть.
header { border-style: solid; color: black; } h1, h2, h3, section { text-align: center; } nav { text-align: center; } ul { text-align: center; float: left; width: 100%; padding: 0; list-style-type: none; display: grid; grid-template-columns: 1fr 1fr 1fr; } ul li { display: block; margin: auto 0; height:100%; } a { display: block; width: 150px; height:100%; text-decoration: none; color: white; background-color: #808080; border: 1px solid black; } a:hover { background-color: black; } lt;html lang="en"gt; lt;headgt; lt;titlegt; General info lt;/titlegt; lt;link href="Desktop.css" rel="stylesheet" /gt; lt;link href="Mobile.css" rel="stylesheet" /gt; lt;meta charset="utf-8" /gt; lt;meta name="description" content="Web Development" /gt; lt;meta name="keywords" content="HTML and CSS" /gt; lt;meta name="author" content="Author" /gt; lt;meta name="viewport" content="width=device- width, initial-scale=1"gt; lt;/headgt; lt;bodygt; lt;divgt; lt;headergt; lt;h1gt; DTD lt;/h1gt; lt;/headergt; lt;/divgt; lt;divgt; lt;navgt; lt;ulgt; lt;li class="divnav"gt; lt;a href="Generalinfo.html"gt; General information lt;/agt; lt;/ligt; lt;li class="divnav"gt; lt;a href="Favourites.html"gt; Achievement and favourites lt;/agt; lt;/ligt; lt;li class="divnav"gt; lt;a href="Schedule.html"gt; Study schedule lt;/agt; lt;/ligt; lt;/ulgt; lt;/navgt; lt;/divgt; lt;/bodygt; lt;/htmlgt;