Question

我使用以下按钮，我希望它们以相同的高度并行

我尝试将它们放在跨度上并给它们相同的高度，但它不起作用，删除文件按钮大于选择文件而不是并行。

            <span>
                <button type="button" style="display: inline-block;height: 25px " id="RemoveFile">Remove File</button>
                <input onchange="fileOnchange(this)" style="height: 25px"  type="file"  />
            </span>

Answer 1

只需增加输入文件的字体大小

            <span>
            <button type="button" style="display: inline-block;height: 25px " id="RemoveFile">Remove File</button>
            <input onchange="fileOnchange(this)" style="height: 25px; font-size:15.6px;"  type="file"  />
            </span>

这是你期待的小提琴

http://jsfiddle.net/eeT6Q/3/

Answer 2

这是一个可以帮助你的小提琴。根据您的需要更改它们。 http://jsfiddle.net/sankalpsri/8Q38B/ HTML

<span>
    <button type="button" id="RemoveFile">Remove File</button>
    <input onchange="fileOnchange(this)"  class="custom-file-input" type="file"  />
</span>

<强> CSS

input, button{
    height: 31px;
    width: 200px;
    float: left;
    margin: 10px;
    padding: 0px;

}
.custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
}
.custom-file-input::before {
  content: 'Select some files';
  display: inline-block;
  background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
  border: 1px solid #999;
  border-radius: 3px;
  padding: 6px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;

}

.custom-file-input:active::before {
  background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}

Answer 3

试一试

<span>
                <button type="button" style="display: inline-block; height:23px; vertical-align:top; " id="RemoveFile">Remove File</button>
                <input onchange="fileOnchange(this)" style="height: 25px"  type="file"  />
            </span>

将两个按钮平行放置，高度相同

3 个答案: