Question

我想在我的网站上提供一些帮助，我正在努力使网站快速响应，我想要的是＆＃39;文本框＆＃39;更改视口时保持原位，但在视口缩小时，文本框不再同步，如果这有意义的话。

提前致谢！

＆＃13;

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;

}

}

＆＃13;

<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>

＆＃13;

Answer 1

对您进行了一些更改，并删除了ul和textbox之间的break标记。试试这个css，我认为它正在做你想要的。

＆＃13;

body {
    background-color: #F2F2F2;
 
}

.body1 {
    background-color: #FFFFFF;
    height: 80vw;
    max-width: 72.6vw;
    overflow:hidden;
    margin-top:0px;
    max-font-size:16px; 
    position:relative;
    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;
	float:left;
    
}
#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;

}

}

＆＃13;

<body>
<div>
<img class="webheadlogo" src="logo1.png" alt=".logo">
<img class="webheadimg" src="Webhead.jpg" alt=".Webhead" />

</div>
<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>
<div class="body1">
Text Box
</div>
</body>

＆＃13;

响应式文本框

1 个答案: