如何将文本放在徽标旁边，同时保持导航链接到右边?

Question

我是CSS的新手，我一直在做一个实践项目，但还没有能够做到标题所说的

我试过margin-right: auto方法，我在很多视频中都看到过，它很有效，但它只能把标题居中。

下面是一些代码:

.logo {
cursor: pointer;
margin-right: auto;
margin-left: 1.5rem;
height: 3rem;
width: auto;
}
.title {
text-transform: capitalize;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 1.8rem;
font-weight: bold;
margin-right: auto;
}
header {
position: fixed;
z-index: 100;
width: 100%;
height: 4rem;
display: flex;
justify-content: flex-end;
align-items: center;
}
.nav_links {
list-style: none;
}
.nav_links li {
display: inline-block;
padding: 0 1.5rem 0 1rem;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 1.2rem;
}

<header>
<img class="logo" src="./Images/ic-logo.svg" alt="logo">
<div class="title">
<span class="title1">COLMAR</span>
<span class="title2">ACADEMY</span>
</div>
<nav>
<ul class="nav_links">
<li><a href="#">On Campus</a></li>
<li><a href="#">Online</a></li>
<li><a href="#">For companies</a></li>
<li><a href="#">Sign in</a></li>
</ul>
</nav>
</header>

我正在尝试将标题移动到徽标旁边，同时保持导航栏链接到右侧。

任何帮助/指示都是非常感谢的。

Answer 1

这样做:

1. 标题不应该有justify-content: flex-end;
2. logo也不需要margin-right:auto。标题有margin-right: auto;
就足够了

阅读内联注释

.logo {
cursor: pointer;
/*  NEW */
/* margin-right: auto; */
margin-left: 1.5rem;
height: 3rem;
width: auto;
}
.title {
text-transform: capitalize;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 1.8rem;
font-weight: bold;
margin-right: auto;
}
header {
position: fixed;
z-index: 100;
width: 100%;
height: 4rem;
display: flex;
/*  NEW */
/* justify-content: flex-end;  */
align-items: center;
}
.nav_links {
list-style: none;
}
.nav_links li {
display: inline-block;
padding: 0 1.5rem 0 1rem;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 1.2rem;
}

<header>
<img class="logo" src="./Images/ic-logo.svg" alt="logo">
<div class="title">
<span class="title1">COLMAR</span>
<span class="title2">ACADEMY</span>
</div>
<nav>
<ul class="nav_links">
<li><a href="#">On Campus</a></li>
<li><a href="#">Online</a></li>
<li><a href="#">For companies</a></li>
<li><a href="#">Sign in</a></li>
</ul>
</nav>
</header>

Answer 2

不确定你在这里要做什么，绘图或表示将特别有帮助。但是我有两种方法可以用来解决这个问题。

1. 使用flex-boxes:

创建一个像这样的伸缩框:

<div style="display: flex; flex-direction: row;">
<img class="logo" src="./Images/ic-logo.svg"alt="logo">
<div class="title">
<span class="title1">COLMAR</span>
<span class="title2">ACADEMY</span>
</div>
</div>

对你的导航栏做同样的事情:)

2. 只是从徽标中删除右距，它似乎在浏览器中工作得很好。

Answer 3

使用HTML结构，您可以使用下面的css完成此操作。我剥离了你的样式，这样你就可以只看到需要完成你所要求的东西。

header {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.logo {
flex-shrink: 1;
margin-right: 8px;
}
.title {
flex-grow: 1;
}
.nav_links {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.nav_links li {
margin-left: 8px;
}

<header>
<img class="logo" src="./Images/ic-logo.svg" alt="logo">
<div class="title">
<span class="title1">COLMAR</span>
<span class="title2">ACADEMY</span>
</div>
<nav>
<ul class="nav_links">
<li><a href="#">On Campus</a></li>
<li><a href="#">Online</a></li>
<li><a href="#">For companies</a></li>
<li><a href="#">Sign in</a></li>
</ul>
</nav>
</header>