徽标位于左侧，菜单链接居中

Question

导航布局的表示

嗨。我正在为图片(上图(中的导航布局编写代码。我想要标志，这是一张图片，在左边，菜单链接在中间。这将如何用CSS编写？

这是该部分的HTML：

<header id="header">
<div class="img">
<a href="landingpage.html"><img src="/logo.png" alt="image of the logo" id="header-img" width="175px" height="52px"></a>
</div>

<nav id="nav-bar">
<ul id="menu">
<li><a class="nav-link" href="#menu1">menu1</a></li>
<li><a class="nav-link" href="#menu2">menu2</a></li>
<li><a class="nav-link" href="#menu3">menu3</a></li>   
</ul>
</nav>
</header>

我可能需要先对HTML进行一些更改吗？

提前感谢！

Answer 1

主要想法是将所有东西都对齐在中心，但随后，将徽标从流中拉出，以便将其放置在左侧。当然，您需要记住在小屏幕上查询媒体。

更新：

#header {
display:flex; 
justify-content: center; /* center everything */
align-items: center;
margin-top: 20px;
padding: 0 260px; /* prevent crawling on the logo */
}
.img{
position: absolute; /* remove the logo from the flow */
left: 20px;   /* move the logo to left */
height: 48px;
width: 100px;
}
#nav-bar > ul {
display:flex; /* make a horizontal menu */
gap: 20px;    /* gap between menu items */
list-style: none;
padding-left: 0px;
}
.img, #nav-bar > ul > li {
border: 1px solid gray;
padding: 5px;
}

<header id="header">
<div class="img">
<a href="landingpage.html"><img src="/logo.png" alt="image of the logo" id="header-img" width="175px" height="52px"></a>
</div>
<nav id="nav-bar">
<ul id="menu">
<li><a class="nav-link" href="#menu1">menu1</a></li>
<li><a class="nav-link" href="#menu2">menu2</a></li>
<li><a class="nav-link" href="#menu3">menu3</a></li>   
</ul>
</nav>
</header>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Omnis, ducimus earum. Perferendis, neque quasi praesentium tempore at laudantium omnis modi sunt. Tenetur cum dolor magnam praesentium iusto illo, delectus doloribus?</p>

上一个：

#header {
display:flex;
justify-content: center;
}
.img{
position: absolute;
left: 0; 
}
#nav-bar{
align-self:center;
}

<header id="header">
<div class="img">
<a href="landingpage.html"><img src="/logo.png" alt="image of the logo" id="header-img" width="175px" height="52px"></a>
</div>

<nav id="nav-bar">
<ul id="menu">
<li><a class="nav-link" href="#menu1">menu1</a></li>
<li><a class="nav-link" href="#menu2">menu2</a></li>
<li><a class="nav-link" href="#menu3">menu3</a></li>   
</ul>
</nav>
</header>

Answer 2

我相信你可以根据你想要的布局尝试一下，然后进一步修改它以满足你的需求。这将为您提供您所要求的布局。

<header id="header">
<div class="container-1">
<a href="landingpage.html"
><img
src="https://picsum.photos/200"
alt="image of the logo"
id="header-img"
width="175px"
height="52px"
/></a>
</div>
<div class="container-2">
<ul id="menu">
<li class="menu-item">
<a class="nav-link" href="#menu1">menu1</a>
</li>
<li class="menu-item">
<a class="nav-link" href="#menu2">menu2</a>
</li>
<li class="menu-item">
<a class="nav-link" href="#menu3">menu3</a>
</li>
</ul>
</div>
</header>

这是上面html 的css

#menu {
text-decoration: none;
list-style: none;
margin: 0;
padding-inline-start: 0;
}
.container-1 {
display: inline-block;
}
.container-2 {
text-align: center;
display: inline-block;
width: calc(100% - 200px);
}
.menu-item {
display: inline-block;
padding: 1rem;
}

您可以尝试此操作，并进一步设置组件的样式。