Question

我正在尝试创建一个上传版块，其中包含一个内部有一行的框。该行有两个buttons（其中包含输入）和一个h3。我无法让他们保持同样的高度。以下代码说明了这一点：

HTML

<div id="mi-wrap">
    <h1>Title</h1>

    <div id="main-wrap">
        <div id="inner-wrap">
            <div id="wide-bar">
                <button id="upload-button">
                <input type="file" id="upload" value="PDF"/>
                </button>
                <h3 id="file-preview"><i class="fa fa-arrow-left"></i>Upload je bestand</h3>
                <button id="send-button" type="submit" name="search-button">
                </button>
            </div>
        </div>
    </div>
</div>

CSS ：

#mi-wrap {
  width:100%;
  margin:0 auto 0;
  height:200px;
}

#main-wrap {
    background-color:blue;
    width:90%;
    margin:0 auto 0;
    height:100%;
}

#inner-wrap {
  width:100%;
  height:100%;
  display:table;
}

#wide-bar {
    height:60px;
}

#wide-bar button, #wide-bar h3 {
  background-color: green;
  height:60px;
  display:inline-block;
}

#wide-bar button {
  width:25px;
}

#wide-bar button input {
  display:none;
}

#wide-bar h3 {
  width:50%;
}

代码没有完成（即它与我自己的代码不完全相同），但它确实说明了问题。 Also in this jsFiddle

Answer 1

您需要放置另一个显示，inline-block与vertical-align

结合使用

#wide-bar h3 {
  width:50%;
  display: inline-block;
  vertical-align:top;
}

看到它正常工作：

https://jsfiddle.net/89u30vhx/1/

Answer 2

试试这种方式

#wide-bar button, #wide-bar h3 {
    background-color: green;
    border: 0 none;
    /*display: table-cell;*/ /*Remove this property*/
    float: left;/*Add this property*/
    height: 60px;
    margin: 0;
    padding: 0;
}

Answer 3

这样做：

#wide-bar {
    vertical-align: middle;
    max-height:60px;
    display:table;
}

#wide-bar button, #wide-bar h3 {
  margin:0;
  padding:0;
  background-color: green;
  display:table-cell
}

#wide-bar button {
  width:25px;
  height: 60px;
}

Answer 4

按如下方式更改您的CSS：

#wide-bar {
    height: 60px;
}

#wide-bar button, #wide-bar h3 {
    margin: 0;
    padding: 0;
    background-color: green;
    height: 60px;
    display: inline-block;
    float: left;
}

JSfiddle demo

按钮与行的其余部分的高度不同

4 个答案: