Question

我已经建立了一个简单的基于烧瓶的网站，其中包含一些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;
}

我正在尝试使移动设备友好，我正在尝试避免基于像素的测量。问题是在桌面模式下我不断得到这个水平滚动条。我不想只隐藏滚动条，我只想留在视口的境界。关于发生了什么的任何想法？

Answer 1

在表单元素中将位置更改为绝对应该有帮助：

form {
 text-align: left;
 position: absolute;
 top: 50vh;
 left: 50vw;
}

为什么我有一个带css＆amp;的水平滚动条？ HTML

1 个答案: