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;
}

在小提琴中你可以看到地址textarea完全正常，而文件输入附加到输入字段的底部。我该怎么做？我已经尝试删除填充，边距，设置行高度为0但是没有让它变得不同。

Answer 1

由于应用于height的{{1}}，这种情况正在发生。当您已.form-control padding垂直于20px时，文件上传按钮位于距其容器顶部20px处。

如果要将文件上传按钮垂直放置在中心位置，请将.form-control高度应用于文件输入。

auto

Demo

＆＃13;

#logo {
    height: auto;
}

＆＃13;

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

＆＃13;

Answer 2

在<input name="logo" id="logo" placeholder="Logo" autofocus="" required="" class="form-control" type="file">中，您正在呼叫班级＆＃34;表格控制＆＃34;这使得输入字段看起来像字段height:34px;，您应该添加到您的CSS [{1}}

＆＃13;

#logo{height:auto;}

＆＃13;

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

＆＃13;

Answer 3

尝试减少填充

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

Answer 4

＆＃13;

.form-control {
  padding: 20px 15px;
  border: 3px solid #eee;
  background-color: #f9f9f9;
  box-shadow: none;
}
#logo{
  padding: 5px;
  margin: 0;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
}

＆＃13;

<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>

＆＃13;

以下是更新后的Demo

输入类型文件

4 个答案: