Question

我是一个初学者，我有一个标题宽度的问题（我也不是那么好的英语发言者所以我希望我能设法解释这个好的，因为我需要）。标题在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: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;
}

Answer 1

如果我没有错，你想要的是反应能力，所以你需要做的就是像这样在你的头部添加一个元标记：

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

而是选择像Bootstrap

这样的响应式CSS框架

Answer 2

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

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

这应该解决它。

Answer 3

删除左侧属性并添加float: right; 然后加上这个 #adresa ul li img { width: 100%; height: 100%; }

如何保持标题与窗口

3 个答案: