Question

所以我有一个div，它有一个输入和按钮标签。如何使高度与div的高度相同？

我尝试过以下代码：

  <div class="input-area" style="border:1px solid;display:table;background:green;">
        <input type="text" style="border:none;display:table;float:left;background-color:red;" />
        <button>Search</button>
  </div>

由于我现在无法上传图片，因此这里有一个链接：

https://drive.google.com/file/d/0BxCMhBQ7C3kLemVEemJYUldaZWM/edit?usp=sharing

Answer 1

有很多方法可以实现这一目标。 Here are two：

将div容器指定为特定高度，然后提供input
元素高度为100%：

<div class="input-area" style="height:50px;">
    <input type="text" style="height:100%;" />
</div>

绝对定位input元素，相对地定位div容器，然后使用更多CSS来正确设置样式：

<div class="input-area" style="position:relative;width:200px">
    <input type="text" style="position:absolute;left:0;top:0;bottom:0;right:50px;" />
</div>

另外，将CSS移动到外部文件。内联样式很烦人。

Answer 2

<input height="pixels">

以像素为单位设置您想要的高度。试试吧

Answer 3

由于浏览器的不同，文本输入很棘手。我在CSS中使用以下内容来确保所有输入具有相同的高度：

input[type="text"] {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 24px;
}

HTML中输入标记的高度

3 个答案: