HTML Это мой html исходный код, в котором я хочу создать список меню с гибким боксом и сеткой.
<!DOCTYPE html>
<html>
<head>
<title>dmghdfjb</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<header>
<div id="brand">
<a href="index.html"><img src="images/22.jpg"></a>
<ul class="menulist">
<li class="list"><a href="index.html">Home</a></li>
<li class="list square"><a href=entry.html>Booking</a></li>
<li class="list square"><a href="#">Resturant</a></li>
<li class="list square"><a href="over.html">Overview</a></li>
<li class="list square"><a href="signup">Login</a></li>
</ul>
</div>
</header>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
header{
width: 100%;
background-color: #EC8C01;
height: 100px;
display: flex;
align-content: center;
}
#brand{
width: 200px;
height: 98px;
}
#brand > a > img{
width: 100%;
height: 100%;
}
#menu{
display: flex;
}
.menulist{
background-color: red;
list-style: none;
padding: 5px;
text-align: center;
display: inline-grid;
grid-template-columns: repeat(5,100px);
grid-gap: 5px;
justify-content: end;
}
.list{
background-color: green;
padding: 10px;
border-radius: 40px;
}
В этом коде выше я хочу поместить свой список меню внутри бренда и установить его в правом углу, чтобы, когда экран моего браузера становится узким и узким, полоса прокрутки не должна отображаться на странице с нижней стороны .