我有一個關于元素定位和文本對齊的問題：導航容器具有三個元素：徽標、標題、導航串列。密碼筆
/**{
margin: 0;
padding: 0;
box-sizing: border-box;
}*/
header {
background-color: orange;
url(../images/hero.jpg);
height: 600px;
background-size: cover;
}
.fixed-nav {
list-style: none;
}
.fixed-nav li {
display: inline-block;
}
nav {
display: flex;
justify-content: space-between;
padding: 30px 40px;
}
.logo {
height: 25px;
width: 120px;
}
.title {
color: white;
text-transform: uppercase;
font-family: "Avalors Personal Use", sans-serif;
}
.nav-menu {
display: flex;
gap: 1rem;
/* text-align: center;*/
list-style: none;
justify-content: center;
align-content: center;
}
.nav-menu li {
font-family: "Avenir LT Std", sans-serif;
display: inline-block;
color: white;
font-size: 16px;
}
.nav-menu li a {
text-decoration: none;
color: white;
/*padding-left:10px;
padding-right:10px;*/
}<header>
<ul class="fixed-nav">
<li>phone</li>
<li>whats</li>
<li>search</li>
</ul>
<nav class="navbar">
<a href="#" class="logo">
<img src="#" alt="logo" />
</a>
<h2 class="title">
title
</h2>
<ul class="nav-menu">
<li> <a href="#">HOME</a> </li>
<li> <a href="#">ABOUT</a> </li>
<li> <a href="#">PRODUCTS</a> </li>
<li> <a href="#">NEWS</a> </li>
<li> <a href="#">CONTACT</a> </li>
</ul>
</nav>
<h2>Slogan</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</header>我不知道如何在左側顯示徽標和標題，在右側顯示導航串列。當我使用 flex 水平顯示它們時，導航串列子項顯示在左上角。我試過的演示 ：文本對齊，對齊內容......沒有結果。任何見解都值得贊賞。
uj5u.com熱心網友回復：
- 為您的標題和徽標制作一個包裝。
- 將所需樣式應用于包裝器。
<header>
<ul class="fixed-nav">
<li>phone</li>
<li>whats</li>
<li>search</li>
</ul>
<nav class="navbar">
<div class='wrapper'>
<a href="#" class="logo">
<img src="#" alt="logo" />
</a>
<h2 class="title">
title
</h2>
</div>
<ul class="nav-menu">
<li> <a href="#">HOME</a> </li>
<li> <a href="#">ABOUT</a> </li>
<li> <a href="#">PRODUCTS</a> </li>
<li> <a href="#">NEWS</a> </li>
<li> <a href="#">CONTACT</a> </li>
</ul>
</nav>
<h2>Slogan</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</header>
.wrapper {
display: flex;
align-items: center;
}
uj5u.com熱心網友回復：
試試這個，它會作業！
/**{
margin: 0;
padding: 0;
box-sizing: border-box;
}*/
header {
background-color: orange;
url(../images/hero.jpg);
height: 600px;
background-size: cover;
}
.fixed-nav {
list-style: none;
}
.fixed-nav li {
display: inline-block;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 40px;
}
.logo {
height: 25px;
}
.title {
color: white;
text-transform: uppercase;
font-family: "Avalors Personal Use", sans-serif;
margin-left: 10px;
}
.nav-menu {
display: flex;
gap: 1rem;
/* text-align: center;*/
list-style: none;
justify-content: center;
align-content: center;
}
.nav-menu li {
font-family: "Avenir LT Std", sans-serif;
display: inline-block;
color: white;
font-size: 16px;
}
.nav-menu li a {
text-decoration: none;
color: white;
/*padding-left:10px;
padding-right:10px;*/
}
.demo {
display: flex;
align-items: center;
}<header>
<ul class="fixed-nav">
<li>phone</li>
<li>whats</li>
<li>search</li>
</ul>
<nav class="navbar">
<div class="demo">
<a href="#" class="logo">
<img src="#" alt="logo" />
</a>
<h2 class="title">
title
</h2>
</div>
<ul class="nav-menu">
<li> <a href="#">HOME</a> </li>
<li> <a href="#">ABOUT</a> </li>
<li> <a href="#">PRODUCTS</a> </li>
<li> <a href="#">NEWS</a> </li>
<li> <a href="#">CONTACT</a> </li>
</ul>
</nav>
<h2>Slogan</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</header>uj5u.com熱心網友回復：
.nav-menu {
margin-left: auto;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/496886.html