gpt4 book ai didi

html - 图标不会在导航菜单栏中格式化

转载 作者:行者123 更新时间:2023-11-28 04:16:51 25 4
gpt4 key购买 nike

我遇到一个问题,Facebook 图标和 Instagram 图标没有在导航菜单栏中格式化,它们就在它下面,不会进入栏内。我需要图标位于导航栏的右侧,标题和图标之间有一些空间,但它们在中心排成一行。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lunation Boards</title>
<link rel = "icon" href="LogoBlack.PNG" type="image/SVG">
</head>
<style>
body {margin:0;}
.Header {
z-index: 100;
position: fixed;
top: 0;
width: 100%;
background-color: #000000;
height: 70px;
}

@media screen and (max-width:680px) {
.Header.responsive {position: relative;}
.Header.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
}
@media (max-width: 960px){
.Header {
position: relative;
display: flex;
width: 86px;
height: 15px;
margin: 0 auto;
}
}
.headerLogo{
text-align: center;
font-size: small;
font-style: italic;
font-family: Verdana;
color: white;
}

</style>
<body>

<div class="Header" id="myHeader">
<a class = "headerLogo">
<a href="file:///C:/Noah's%20stuff/LunationBoards/Home.html" ><h1 style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
text-align: center;">Lunation Boards</h1></a>
<style>
a{text-decoration: none}
</style>
</a>
<a class = "Facebook" style = "padding-left: 1000px;">
<img src = "facebook-3-xxl.png">
</a>
<a class = "Instagram" style = "padding-left: 30px">
<img src = "instagram-32.png">
</a>
</div>
</body>
<body>

最佳答案

我的意思是将样式放在头部部分之间,像这样

<head>
<meta charset="UTF-8">
<title>Lunation Boards</title>
<link rel = "icon" href="LogoBlack.PNG" type="image/SVG">
<style>
body {margin:0;}
.Header {
z-index: 100;
position: fixed;
top: 0;
width: 100%;
background-color: #000000;
height: 70px;
}

@media screen and (max-width:680px) {
.Header.responsive {position: relative;}
.Header.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
}
@media (max-width: 960px){
.Header {
position: relative;
display: flex;
width: 86px;
height: 15px;
margin: 0 auto;
}
}
.headerLogo{
text-align: center;
font-size: small;
font-style: italic;
font-family: Verdana;
color: white;
}

</style>
</head>
<body>

关于html - 图标不会在导航菜单栏中格式化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42442799/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com