javascript - 输入类型文件上方不需要的空间

Question

我正在使用 bootstrap 创建表单并编辑了一些样式。这是一个 fiddle .

<div class="form-group">
  <label for="email" class="col-sm-3 control-label">Logo</label>
  <div class="col-sm-7">
    <input type="file" name="logo" id="logo" placeholder="Logo" autofocus="" required="" class="form-control">
  </div>
</div>
<div class="form-group">
  <label for="address" class="col-sm-3 control-label">Address</label>
  <div class="col-sm-7">
    <textarea name="address" id="address" placeholder="Address" required="" class="form-control"></textarea>
  </div>
</div>

.form-control {
  padding: 20px 15px;
  border: 3px solid #eee;
  background-color: #f9f9f9;
  box-shadow: none;
}

在 fiddle 中，您可以看到地址文本区域非常好，而文件输入附加到输入字段的底部。我该如何做对？我试过删除填充、边距、将行高设置为 0，但没有任何改变。

Answer 1

发生这种情况是因为 height 应用于 .form-control。当你应用 20px 的 padding 垂直于 .form-control 时，文件上传按钮被放置在距其顶部 20px 的位置容器。

如果要将文件上传按钮垂直居中放置，请将auto 高度应用于文件输入。

#logo {
    height: auto;
}

Demo

#logo {
  height: auto;
}
.form-control {
  padding: 20px 15px;
  border: 3px solid #eee;
  background-color: #f9f9f9;
  box-shadow: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
  <label for="email" class="col-sm-3 control-label">Logo</label>
  <div class="col-sm-7">
    <input type="file" name="logo" id="logo" placeholder="Logo" autofocus="" required="" class="form-control">
  </div>
</div>
<div class="form-group">
  <label for="address" class="col-sm-3 control-label">Address</label>
  <div class="col-sm-7">
    <textarea name="address" id="address" placeholder="Address" required="" class="form-control"></textarea>
  </div>
</div>