Привет У меня возникла проблема при создании этой панели навигации ... потому что я не могу разделить пробел точно так, как я хочу. пожалуйста, предложите какой-нибудь другой способ выяснить это.
и мне больше нечего сказать, так как я включил изображение и код, который я пробовал, но stackoverflow просит меня добавить некоторые подробности.
Я пытаюсь создать эту панель навигации:
*{
margin: 0;
padding: 0;
}
.container{
display: flex;
width: 90%;
margin: 0 auto;
background-color: white;
border-bottom: 1px solid black;
align-items:center;
justify-content:center;
flex-wrap: wrap;
}
.container .rightmenu{
flex-direction: row-reverse;
}
div:nth-of-type(1) {flex-grow: -1;}
div:nth-of-type(2) {flex-grow: 1;}
div:nth-of-type(3) {flex-grow: 15;}
div:nth-of-type(4) {flex-grow: 5;}
div:nth-of-type(5) {flex-grow: 1;}
.container li{
display: inline;
padding: 12px;
color: #6b6b6b;
font-weight: 400;
font-family: sans-serif-light;
font-size: 14px;
}
a{
text-decoration: none;
}
.img{
padding: 2px;
text-align: center;
}
.img img {
width:44px;
height: 44px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jJio Nav Bar</title>
<link rel="stylesheet" type="text/css" href="style.css"
<body>
<div class="container">
<div class="imghome"> <a href="#"><img src="jio/home-white-icon.png" /></a>
</div>
<div class="leftmenu">
<ul>
<li><a href="#">PLANS</a></li>
<li><a href="#">DEVICES</a></li>
<li><a href="#">APPS</a></li>
<li><a href="#">FIND A STORE</a></li>
</ul>
</div>
<div class="img"><img src="jio.png" /> </div>
<div class="rightmenu">
<ul>
<li><a href="#">SUPPORT</a></li>
<li><a href="#">SIGN IN</a></li>
<li><a href="#">QUICK PAY</a></li>
<li><a href="#"></a>CART 0</li>
</ul>
</div>
<div class="imgsearch"><a href="#"><img src="jio/search-white-icon.png"/> </a>
</div>
</div>
</body>
</html>