我已經嘗試了幾個小時來設計我的導航欄（在螢屏頂部是水平的），以便我的徽標將顯示在左側，選單在中心，用戶名和注銷按鈕在右側（所有這些都是水平的） .我試過了float，position display但似乎沒有任何效果。相反，結果是所有元素（徽標，選單，用戶名，注銷按鈕）都出現在中心。任何幫助將不勝感激。
HTML 代碼
<header>
<div class="page">
<nav class="page__menu page__custom-settings menu">
<div class="logo">
<img src="images/logo.png">
</div>
<ul class="menu__list r-list">
<li class="menu__group"><a href="index.php" class="menu__link r-link text-underlined">Main</a></li>
<li class="menu__group"><a href="main.php" class="menu__link r-link text-underlined">Songs</a></li>
<li class="menu__group"><a href="ratings.php" class="menu__link r-link text-underlined">Ratings</a></li>
</ul>
<section id="login">
<a href="registration/logout.php" class="button">Logout</a>
<h1>User: <?php echo $user_data['user_name']; ?></h1>
</section>
</nav>
</header>
CSS 代碼
.r-link{
display: var(--rLinkDisplay, inline-flex) !important;
}
.r-link[href]{
color: var(--rLinkColor) !important;
text-decoration: var(--rLinkTextDecoration, none) !important;
}
.r-list{
padding-right: var(--rListPaddingRight, 0) !important;
margin-top: var(--rListMarginTop, 0) !important;
margin-bottom: var(--rListMarginBottom, 0) !important;
margin-left: var(--rListMarginLeft, 0) !important;
list-style: var(--rListListStyle, none) !important;
}
.menu{
--rLinkColor: var(--menuLinkColor, currentColor);
display: flex;
justify-content: center;
}
.menu__link{
display: var(--menuLinkDisplay, block);
}
.menu__link:focus{
outline: var(--menuLinkOutlineWidth, 2px) solid var(--menuLinkOutlineColor, currentColor);
outline-offset: var(--menuLinkOutlineOffset);
}
.menu__link:hover{
--rLinkColor: #e8491d; ;
}
.menu{
background-color: var(--menuBackgroundColor, #f0f0f0);
box-shadow: var(--menuBoxShadow, 0 1px 3px 0 rgba(0, 0, 0, .12), 0 1px 2px 0 rgba(0, 0, 0, .24));
}
.menu__list{
display : flex;
}
.page__menu img{
float: left;
position: relative;
margin: 10px 15px 15px 10px;
display: block;
width: 450px;
max-width:100% ;
height: auto;
margin: auto;
}
.menu__link{
padding: var(--menuLinkPadding, 1.5rem 2.5rem);
font-weight: 700;
text-transform: uppercase;
}
.text-underlined{
position: relative;
overflow: hidden;
will-change: color;
transition: color .25s ease-out;
}
.text-underlined::before,
.text-underlined::after{
content: "";
width: 0;
height: 3px;
background-color: var(--textUnderlinedLineColor, currentColor);
will-change: width;
transition: width .1s ease-out;
position: absolute;
bottom: 0;
}
.text-underlined::before{
left: 50%;
transform: translateX(-50%);
}
.text-underlined::after{
right: 50%;
transform: translateX(50%);
}
.text-underlined:hover::before,
.text-underlined:hover::after{
width: 100%;
transition-duration: .2s;
}
.page__custom-settings{
--menuBackgroundColor: #255785;
--menuLinkColor: #fff;
--menuLinkColorUnactive: #241c69;
--menuLinkOutlineOffset: -.5rem;
}
.button {
background-color: #e8491d;
color: white;
padding: 10px 12px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 7px 7px;
transition-duration: 0.4s;
cursor: pointer;
float : right;
}
.button:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
h1 {
text-align: right;
font-size: 14px;
font-weight: bold;
font-family: "Times New Roman", Times, serif;
color: white;
padding: 20px;
}
uj5u.com熱心網友回復：
這是我修復的結果，請檢查并告訴我。您需要將 justify-content: space-between 改為 center 到選單并將 align-items: center 和 align-items: center 添加到 #login。添加了固定的 css 代碼。希望對你有幫助~
.r-link {
display: var(--rLinkDisplay, inline-flex) !important;
}
.r-link[href] {
color: var(--rLinkColor) !important;
text-decoration: var(--rLinkTextDecoration, none) !important;
}
.r-list {
padding-right: var(--rListPaddingRight, 0) !important;
margin-top: var(--rListMarginTop, 0) !important;
margin-bottom: var(--rListMarginBottom, 0) !important;
margin-left: var(--rListMarginLeft, 0) !important;
list-style: var(--rListListStyle, none) !important;
}
.menu {
--rLinkColor: var(--menuLinkColor, currentColor);
display: flex;
justify-content: space-between;
align-items: center;
}
.menu__link {
display: var(--menuLinkDisplay, block);
}
.menu__link:focus {
outline: var(--menuLinkOutlineWidth, 2px) solid var(--menuLinkOutlineColor, currentColor);
outline-offset: var(--menuLinkOutlineOffset);
}
.menu__link:hover {
--rLinkColor: #e8491d;
}
.menu {
background-color: var(--menuBackgroundColor, #f0f0f0);
box-shadow: var(--menuBoxShadow, 0 1px 3px 0 rgba(0, 0, 0, .12), 0 1px 2px 0 rgba(0, 0, 0, .24));
}
.menu__list {
display: flex;
padding-left: 0;
}
.page__menu img {
float: left;
position: relative;
margin: 10px 15px 15px 10px;
display: block;
width: 450px;
max-width: 100%;
height: auto;
margin: auto;
}
#login {
display: flex;
align-items: center;
}
.menu__link {
padding: var(--menuLinkPadding, 1.5rem 2.5rem);
font-weight: 700;
text-transform: uppercase;
}
.text-underlined {
position: relative;
overflow: hidden;
will-change: color;
transition: color .25s ease-out;
}
.text-underlined::before,
.text-underlined::after {
content: "";
width: 0;
height: 3px;
background-color: var(--textUnderlinedLineColor, currentColor);
will-change: width;
transition: width .1s ease-out;
position: absolute;
bottom: 0;
}
.text-underlined::before {
left: 50%;
transform: translateX(-50%);
}
.text-underlined::after {
right: 50%;
transform: translateX(50%);
}
.text-underlined:hover::before,
.text-underlined:hover::after {
width: 100%;
transition-duration: .2s;
}
.page__custom-settings {
--menuBackgroundColor: #255785;
--menuLinkColor: #fff;
--menuLinkColorUnactive: #241c69;
--menuLinkOutlineOffset: -.5rem;
}
.button {
background-color: #e8491d;
color: white;
padding: 10px 12px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 7px 7px;
transition-duration: 0.4s;
cursor: pointer;
float: right;
}
.button:hover {
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
h1 {
text-align: right;
font-size: 14px;
font-weight: bold;
font-family: "Times New Roman", Times, serif;
color: white;
padding: 20px;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/492761.html
上一篇：單擊時更改按鈕寬度但不更改容器