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

我是一个初学者，我有一个标题宽度的问题（我也不是很好的英语发音，所以我希望我能够解释这个好，因为我需要至）。标题在css中标记为100％，但是当我更改Firefox或Chrome窗口的大小时，它与显示器的宽度保持一致，并且我在浏览器窗口中将该拖动线向下。网站上的其他所有内容都遵循窗口的大小，只有这个大小保持不变。他们都有位置：亲戚。这是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:[email protected]"> <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; 
}

来源

2017-03-31 nnikolic1986

你给'#navbar UL li''留下了响应CSS框架：970px'和'＃1 ogo''右：620px'。在其他CSS同样。这是造成这个问题的原因。你必须给他们的百分比值，或一些合理的固定像素。 – BCoder

还有一件事是，不要在'position：relative'元素中使用'left'和'right'。改用'margin'或'padding'。 – BCoder

我可以说，这里的第一个答案，在头部添加标签并没有帮助...标题仍然保持较大，然后窗口。另外，当我把宽度和高度100％，这是不好的。因为他们是照片，他们变得太大，并且全部都没有秩序。 – nnikolic1986

您需要将图像的宽度和高度改为100％

#adresa ul li img { 
width: 100%; 
height: 100%; 
}

这应该修复它。

来源

2017-03-31 13:38:13

我可以说这里的第一个答案，在头部添加标签没有帮助...标题仍然保持较大，然后窗口。另外，当我把宽度和高度100％，这是不好的。因为他们是照片，他们变得太大，并且全部都没有秩序。 – nnikolic1986

删除留下财产，并添加float: right; 再加入这个 #adresa ul li img { width: 100%; height: 100%; }

来源

2017-03-31 14:01:40

你想要的是响应如果我没有错，所以你需要做的是元标记添加到你的脑袋像本节：

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

，而是去喜欢Bootstrap

来源

2017-03-31 14:04:55

为什么他应该去一个响应框架，如果他只需要一些百分比值？所以比较一下css可能5Kb与Bootstrap 121kb - >而我只是在谈论bootstrap.min.css – MarcelD

upvoted为元标记建议 - 同意@MarcelD Bootstrap臃肿！ –

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

回答

相关问题