我用一些 html 建立了一个简单的基于烧瓶的网站:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<link rel="stylesheet" type="text/css" href={{ url_for('static', filename='common.css') }}>
</head>
<div id="main_div">
<form action="/login" method="post">
<br>
<input type="text" name="user_name" placeholder="Username">
<br><br>
<input type="password" name="password" placeholder="Password">
<br><br>
<input type="submit" value="Login" id="button">
</form>
</div>
</html>
这是随附的 css 文件:
#button {
border: .0;
background: lightgrey;
font-size: large;
color: grey;
}
html {
margin: 0;
padding:0;
width: auto;
}
head {
background: green;
}
#main_div {
height: 100vh;
width: auto;
padding:0;
margin:0;
background: transparent;
}
form {
text-align: left;
position: relative;
top: 50vh;
left: 50vw;
}
p{
text-align: left;
position: relative;
top: 50vh;
left: 50vw;
}
我试图使移动友好,并试图避免基于像素的测量。问题是在桌面模式下,我一直得到这个水平滚动条。我不想只是隐藏滚动条,我只想留在视口的领域。关于发生了什么的任何想法?
在表单元素中将位置更改为绝对应该有帮助:
form {
text-align: left;
position: absolute;
top: 50vh;
left: 50vw;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句