Question

我只想要一个＆＃34; flat＆＃34;输入文本字段并在同一高度提交按钮。

HTML：

    <form>
        <input type="text" placeholder="input text" id="name-check" />
        <input type="submit" value="submit" name="query!" />
    </form>

CSS - 我希望它能起作用（丑陋的值让你看到效果）：

    input {
        border:0 none;
        background-color:#f00;
        height:300px;
    }

结果是输入文本字段在顶部和底部比提交按钮（当前镶边，即Windows 7上的firefox）高约1个像素。

如何解决这个问题（跨浏览器）？

jsfiddle

我不明白为什么我需要such a complex solution ...

Answer 1

将box-sizing:border-box;添加到您的输入css中即可。 DEMO

Answer 2

使用以下css。

CSS：

input {
 border:none;
background-color:#f00;
height:300px;
outline:none; //Add the below css
padding:0px;
margin:0px;

} DEMO

Answer 3

您可以将两个控件放在一个高度为300px的容器中，然后将高度：100％用于输入元素

Answer 4

添加box-sizing：border-box; CSS输入。这将解决您的问题

input {
        border:0 none;
        background-color:#f00;
        height:300px;
        box-sizing: border-box;
       }

输入文本并提交相同高度的元素

4 个答案: