css - 提交输入和标签在表单内不对齐

Question

从图中可以看出，“浏览文件”和“上传”这两个看起来像按钮的东西没有对齐。

问题是提交输入“上传”在其上边框和 <form> 之间有 1 个像素。的上边框。所以在它们之间有一个 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 的工具，但我无法确定问题所在。我没有改变或修复那个杂散像素。

Answer 1

试试这个:

input[type="submit" i] {
    vertical-align: top;
}