Используя сетку CSS, мои пункты меню правильно отображаются на большом экране, но на маленьком экране они перекрываются. Пожалуйста, в чем причина и как я могу это исправить ?.
Я вставил сюда только код css, и вы можете щелкнуть ссылку ниже, чтобы просмотреть весь код, то есть HTML и CSS.
полный исходный код: http://jsfiddle.net/x89Lop5t/
Код css:
*{
box-sizing:border-box;
}
body {
background-color:#003EBB;
}
/*styling the css grid container */
.container{
display:grid;
grid-template-columns: repeat(6 , 1fr);
grid-auto-row: 150px;
grid-gap:20px;
align-items: center;
grid-template-areas:
". . . . . mh"
". . nv nv nv ."
}
/*end of css grid container */
/*styling the grid items */
.miniHeader{
grid-area:mh;
}
.miniHeader ul li{
display:inline;
margin-left:20px;
list-style:none;
margin-top:1px;
}
.miniHeader ul li a{
text-decoration: none;
color:white;
}
nav{
grid-area: nv;
}
nav ul li{
display:inline;
border: 1px solid white;
border-radius: 10px;
padding:10px;
margin-left: 5px;
}
nav ul li a{
color:white;
padding:20px;
text-decoration:none;
}
Не могли бы вы также добавить размеры для «большого экрана» и «маленького экрана» и, возможно, скриншоты большого и малого экрана?
Вы должны использовать display:inline-block
для навигации вместо display:inline
. Вы должны использовать display:inline
для стилизации встроенных элементов.
* {
box-sizing: border-box;
}
body {
background-color: #003EBB;
}
/*styling the css grid container */
.container {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-row: 150px;
grid-gap: 20px;
align-items: center;
grid-template-areas: ". . . . . mh" ". . nv nv nv ."
}
/*end of css grid container */
/*styling the grid items */
.miniHeader {
grid-area: mh;
}
.miniHeader ul li {
display: inline;
margin-left: 20px;
list-style: none;
margin-top: 1px;
}
.miniHeader ul li a {
text-decoration: none;
color: white;
}
nav {
grid-area: nv;
}
nav ul li {
display: inline-block;
border: 1px solid white;
border-radius: 10px;
padding: 10px;
margin-bottom: 5px;
margin-left: 5px;
}
nav ul li a {
color: white;
padding: 20px;
text-decoration: none;
}
<div class = "container">
<div class = "miniHeader">
<ul>
<li><a href = "#loginsection">Login</a></li>
<li><a href = "#regsection">Register</a></li>
</ul>
</div>
<nav>
<ul>
<li><a href = "#">Home</a></li>
<li><a href = "#">About</a></li>
<li><a href = "#">Map</a></li>
<li><a href = "#">Contact Us</a></li>
</ul>
</nav>
</div>
Используйте display:inline-block
вместо display:inline
.
nav ul li{
display:inline-block;
border: 1px solid white;
border-radius: 10px;
padding:10px;
margin-left: 5px;
}
Попробуйте изменить тип дисплея
nav ul li
наinline-block