【发布时间】：2015-12-12 02:48:22
【问题描述】：
我希望对我的网站有所帮助，我正在尝试使网站具有响应性，并且我希望“文本框”在更改视口时保持原位，但在视口缩小时文本框不再存在同步，如果有意义的话。
提前致谢！
body {
background-color: #F2F2F2;
}
.body1 {
background-color: #FFFFFF;
width: 72.6vw;
height: 80vw;
max-width: 72.6vw;
overflow:hidden;
margin-top:0px;
max-font-size:16px;
margin-left: 23.4vw;
position:relative;
bottom:200px;
padding: 5px 5px;
}
.webheadimg {
width:96vw;
height:auto;
max-width:96vw;
max-height:auto;
font-family: Tahoma, Geneva, sans-serif;
font-weight: normal;
overflow:hidden;
margin-left:1vw;
}
#menu {
width: 21.4vw;
font-family: Tahoma, Geneva, sans-serif;
font-weight: normal;
font-size: 1vw;
text-align: left;
margin-left: 1vw;
background-color: #CA2A2A;
border-radius: 0px;
max-width: 96vw;
}
#menu ul {
height: auto;
padding: 0.5vw 0vw;
margin: 0px;
}
#menu li {
display: block;
}
#menu a {
text-decoration: none;
color: #FFFFFF;
padding: 0.5vw 0.5vw 0.5vw 0.5vw;
font-size: 3vw;
display:block;
}
#menu a:hover {
color: #000000;
background-color: #FFFFFF;
}
.webheadlogo {
position:absolute;
overflow:hidden;
margin-left: 1vw;
float:left;
height: auto;
width: 10%;
padding: 5px 5px;
}
}<html>
<head>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Hull Daily News</title>
</head>
<body>
<webhead>
<img class="webheadlogo" src="logo1.png" alt=".logo">
<img class="webheadimg" src="Webhead.jpg" alt=".Webhead" />
</webhead>
<div id="menu">
<ul>
<li><a href="website.html">Home</a>
<li><a href="breakingnews.html">Breaking News</a></li>
<li><a href="Sport.html">Sport</a></li>
<li><a href="Hulltoday.html">Hull Today</a></li>
<li><a href="Property.html">Property</a></li>
<li><a href="Social.html">Social Media</a></li>
<li><a href="Music.html">Music</a></li>
<li><a href="Reviews.html">Reviews</a></li>
<li><a href="Movies.html">Movies</a></li>
<li><a href="Weather.html">Weather</a></li>
</ul>
</div>
<br/>
<div class="body1">
Text Box
</div>
</body>
</html>【问题讨论】：
标签： html css responsive-design textbox viewport