css - 提交输入和标签在表单内不对齐
问题描述
正如您从图片中看到的,“浏览文件”和“上传”的两个按钮没有对齐。
问题是提交输入“上传”在其顶部边框和顶部边框之间有 1 个像素<form>
。所以在它们之间有一个 1px 的空白空间。“浏览文件”本身与<form>
.
.center_box {
width: 600px;
background: rgba(0,0,0,0.2);
margin: 40px auto;
text-align: left;
}
.upload_firmware_container {
color: white;
margin-top: 20px;
text-align: center;
}
.upload_firmware_container form {
margin-top: 30px;
}
.file_input_label {
display:inline-block;
width: 200px;
height:30px;
line-height: 30px;
background-color: #e11422;
border:none;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
margin-right:20px;
color: white;
font-size: 18px;
font-weight: bold;
cursor: pointer;
}
#files {
display: none;
}
input[type="submit" i] {
padding: 0;
}
.upload_button {
display:inline-block;
width: 200px;
height: 30px;
background-color: #1489e1;
border:none;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
color: white;
font-size: 18px;
font-weight: bold;
cursor: pointer;
margin-bottom:20px;
}
.upload_button:hover, .upload_button:focus {
background-color: #0e5e9b;
outline: 0;
}
<div class="center_box">
<div class = "upload_firmware_container">
<form method = "POST" action="/doUpload" enctype="multipart/form-data">
<label class="file_input_label" for="files">Browse files</label>
<input id="files" type="file" name="data"/>
<input class="upload_button" type="submit" name="upload" value="Upload" title = "Upload Files">
</form>
<form method="POST">
<input class = "restart_button" type="submit" name="restart_device" value="Restart Device">
</form>
</div>
</div>
这让我快疯了。我不知道如何解决这个问题。
我尝试从输入中消除填充,但它不起作用:
input[type="submit" i] {
padding: 0;
}
过去一个小时我一直在使用 Chrome 的工具,但我无法确定问题所在。我没有更改或修复该杂散像素。
解决方案
尝试这个:
input[type="submit" i] {
vertical-align: top;
}
推荐阅读
- excel - Sumif 函数动态
- laravel - 带有模型函数的 laravel 查询
- php - Webhook:file_get_contents 为空
- azure - Azure AD OpenID 连接 - 组未显示在令牌中
- c# - C# + SpecFlow 的 Allure 报告中的测试严重性级别
- python - 如何在 Python 中创建光谱?
- ios - 将黑色覆盖添加到整个屏幕,包括状态栏
- security - 我应该使用哪种哈希算法来实现安全的文件校验和?
- cmake - Qt:LibDash-Mpeg-Dash 致命错误:QtMultimedia/qaudioformat.h:没有这样的文件或目录
- c# - 如何约束 2 DataTable 列名称