为什么我有一个带有 css 和 html 的水平滚动条

2边

我用一些 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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

CSS最小宽度没有水平滚动条显示

来自分类Dev

将HTML页面分为水平部分,没有垂直滚动条

来自分类Dev

HTML和CSS:使用垂直滚动条水平拆分页面

来自分类Dev

带有水平滚动条的水平滚动条

来自分类Dev

带有CSS和HTML的IE垂直滚动条宽度

来自分类Dev

为什么在此html页面中有水平滚动条

来自分类Dev

如何使水平div滚动条像固定的CSS div一样浮动

来自分类Dev

R Markdown HTML代码块和输出中缺少水平滚动条

来自分类Dev

CSS溢出滚动和隐藏滚动条(iOS)

来自分类Dev

CSS Grid导致水平滚动条

来自分类Dev

R闪亮的桌子,顶部和底部均带有水平滚动条

来自分类Dev

固定标题HTML表格上有多余的水平滚动条吗?

来自分类Dev

HTML / CSS | 滚动条-更改div和拇指悬停时的颜色

来自分类Dev

当我在body元素中将边距和填充设置为0时,为什么仍保持水平滚动条?

来自分类Dev

html顶部的水平滚动条

来自分类Dev

HTML和CSS:使用垂直滚动条水平拆分页面

来自分类Dev

滚动条的HTML / CSS全角问题

来自分类Dev

带有CSS和HTML的IE垂直滚动条宽度

来自分类Dev

滚动条和元素-HTML / CSS

来自分类Dev

CSS-是什么导致此水平滚动条的出现?

来自分类Dev

HTML / CSS中的滚动条格式

来自分类Dev

HTML / CSS-更改滚动条?

来自分类Dev

CSS溢出滚动和隐藏滚动条(iOS)

来自分类Dev

我需要固定宽度和右侧复选框的水平滚动条

来自分类Dev

CSS滚动条的顶部和底部角没有改变

来自分类Dev

CSS中带有水平滚动条的动态表

来自分类Dev

CSS Bootstrap:出现水平滚动条

来自分类Dev

为什么在将 <html> 和 <body> 设置为 100% 时 JSFiddle 会显示滚动条

来自分类Dev

当容器和子项具有自动宽度时如何添加水平滚动条?

Related 相关文章

热门标签

归档