<分区>
<分区>
我似乎无法弄清楚为什么我的输入在其右侧有填充,这是我的 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>
我敢肯定其他人也有这个问题。我什至将所有内容的填充和边距设置为 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/
相关文章:
css - 我应该始终将 `screen` 添加到 `@media` 查询吗?无论有没有 `screen` 条件,一切似乎都能正常工作
javascript - 通过 JS 自动提交表单(超时、时间间隔)
javascript - 一起使用 ReactJS 和 PaperJS 时 Canvas 元素不会调整大小
html - 具有两个相对定位元素的 z-index IE7
android - XDK HTML5 应用程序中的 CSS 渐变兼容性问题
android - android :inputType of EditText View set to "numberDecimal"时接受SIP输入的数字和字母