gpt4 book ai didi

html - 如何保持标题与窗口大小相同

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

我是一个完全的初学者,我对标题宽度有疑问(我的英语也不太好,所以我希望我能根据需要设法解释清楚)。 header 在 css 中标记为 100%,但是当我更改 firefox 或 chrome 窗口的大小时,它保持在显示器的宽度,并且我在浏览器窗口上向下拖动了这条线。网站上的其他所有内容都遵循窗口的大小,只有那个保持大。他们也都有position:relative。这是 html 代码:

<header>
<div id="adresa">
<ul>
<li><img name="telefon" src="Prvisajt/Rounded-16-128.png" width="20"; height="18"; align="bottom";> 011/2762-124 </li>
<li>&emsp; <img name="adresa" src="Prvisajt/location-square-social-media-128.png" width="20"; height="18"; align="bottom";> Ruzveltova 45, 11000 Beograd, Frizerski salon Marko</li>
<li id="mail"><a href="mailto:kontakt@frizerskisalonmarko.com"> <img src="Prvisajt/mail-square-social-media-128.png" width="20"; height="18"; align="bottom"> </a></li>
<li id="face"><a href="https://www.facebook.com/FSM.Beograd/"> <img src="Prvisajt/Facebook_social_media_logo-128.png" width="20"; height="18"; align="bottom"> </a></li>
</ul>
</div>

<div id="navbar">
<ul>
<li><img id="logo" src="Prvisajt/logo-alternate.png" alt="Logo"></li>
<li><a href="galerija.html">GALERIJA</a></li>
<li><a href="cenovnik.html">CENOVNIK</a></li>
<li><a href="kontakt.html">KONTAKT</a></li>
</ul>
</div>
</header>





and this is css:



body {
margin: 0;
padding: 0;
background: black;
}

header {
width: 100%;
max-width: 100%;
height: 120px;
position: relative;
}

#navbar {
width:100%;
height:92px;
float: right;
background-color: black;
position: relative;
top: 0px;
border-bottom: 1px solid white;

}

#navbar ul li {
width:100px;
float: left;
list-style: none;
display: inline;
position: relative;
left: 970px;
}

#navbar li a {
color: white;
line-height: 80px;
text-align: center;
font-size: 12px;
font-family: sans-serif;
font-weight: 600;
text-decoration: none;
}

#logo {
position: relative;
top: -16px;
right: 620px;
}

#adresa {
float: left;
display:inline;
background-color: black;
border-bottom: 1px solid white;
width: 100%;
height: 25px;
text-align: center;
font-size: 11px;
font-weight: 600;
font-family: sans-serif;
list-style-type: none;
text-decoration: none;
text-align: left;
position: relative;
top: 0px;
}

#adresa ul li {
list-style-type: none;
background-color: black;
text-align: center;
display: inline;
text-decoration: none;
color: white;
position: relative;
top: -10px;
left: 350px;
}


#mail img {
position: relative;
top: 4px;
right: -600px;
border-color: white;
border-left: 1px solid white;
border-right: 1px solid white;
}

#face img {
position: relative;
top: 4px;
right: -610px;
border-color: white;
border-left: 1px solid white;
border-right: 1px solid white;
}

最佳答案

如果我没有错,你想要的是响应能力,所以你需要做的是像这样向您的头部部分添加元标记:

<head>
<meta name="viewport" content="width=device-width , initial-scale=1">
</head>

取而代之的是像 Bootstrap 这样的响应式 CSS 框架。

关于html - 如何保持标题与窗口大小相同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43141907/

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