html - 为什么我的输入在右侧有填充?

标签 html css input

<分区>

我似乎无法弄清楚为什么我的输入在其右侧有填充,这是我的 html 和 css 代码:

* {
  margin: 0;
  padding: 0;
}

.header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  padding: 10px;
  background-color: dimgray;
}

.login-wrapper {
  display: flex;
  color: white;
}
<div class="header">
  <div class="login-wrapper">
    <form action="do_login.php">
      <input type="text" name="email" placeholder="Email">
      <input type="password" name="password" placeholder="Password">
      <input type="submit" value="Login">
    </form>
    <form action="register.php">
      <input type="submit" value="Register" />
    </form>
  </div>
</div>

a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>

Image of input padding

我敢肯定其他人也有这个问题。我什至将所有内容的填充和边距设置为 0,但这仍然会发生。这就是输入的运作方式吗?

最佳答案

内联元素对代码中的空白很敏感。只需删除它:

* {
  margin: 0;
  padding: 0;
}

.header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 50px;
  box-sizing: border-box;
  padding: 10px;
  background-color: dimgray;
}

.login-wrapper {
  display: flex;
  color: white;
}
<div class="header">
  <div class="login-wrapper">
    <form action="do_login.php">
      <input type="text" name="email" placeholder="Email"><input type="password" name="password" placeholder="Password"><input type="submit" value="Login">
    </form>
    <form action="register.php">
      <input type="submit" value="Register" />
    </form>
  </div>
</div>

a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>

关于html - 为什么我的输入在右侧有填充?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52837285/

上一篇:php - 如何在 php、bootstrap、css 中向列表/ GridView 添加分页?

下一篇:javascript - 在切换时更改顶部位置 JavaScript

相关文章:

css - 我应该始终将 `screen` 添加到 `@media` 查询吗?无论有没有 `screen` 条件,一切似乎都能正常工作

python - 处理用户输入的空格

javascript - 通过 JS 自动提交表单(超时、时间间隔)

javascript - 一起使用 ReactJS 和 PaperJS 时 Canvas 元素不会调整大小

php - 关闭 php 标签时出错

html - 具有两个相对定位元素的 z-index IE7

android - XDK HTML5 应用程序中的 CSS 渐变兼容性问题

android - android :inputType of EditText View set to "numberDecimal"时接受SIP输入的数字和字母

html - 将标题与图像垂直对齐

javascript - 如何保留添加到 jQuery 匹配集中的项目的顺序?