Css 等高文本框和按钮_Css - Fatal编程技术网

Css 等高文本框和按钮

css

Css 等高文本框和按钮,css,Css,我试图使文本字段和按钮看起来像是联合元素的一部分，因此它们看起来像这样（Chrome Linux的屏幕截图）：但是在Firefox Linux中，按钮太高了两个像素： CSS示例：我已经将这两个元素的字体大小设置为16px，希望它们能显示相同的大小，给出19px的行高-但是在Firefox中，按钮的高度是21px！在Firefox中设置明确的高度可能会导致垂直对齐不正确，除非我缩小字体（不确定原因）显然，您不能在Firefox中设置输入的行高度（请参见和），那么我如何才能强制元素保持正

我试图使文本字段和按钮看起来像是联合元素的一部分，因此它们看起来像这样（Chrome Linux的屏幕截图）：

但是在Firefox Linux中，按钮太高了两个像素：

CSS示例：

我已经将这两个元素的字体大小设置为16px，希望它们能显示相同的大小，给出19px的行高-但是在Firefox中，按钮的高度是21px！在Firefox中设置明确的高度可能会导致垂直对齐不正确，除非我缩小字体（不确定原因）

显然，您不能在Firefox中设置输入的行高度（请参见和），那么我如何才能强制元素保持正确的高度呢

有什么建议吗？

这里有一个跨浏览器的解决方案：

<!doctype html>
<html lang="en">
    <head>
       <style>
            html, body{
                padding: 50px;
            }
            .inputWrapper{
                display:inline-block;
                font-size:16px;
                padding:0px;
                border:1px solid #000000;
                border-radius:6px;
                background-color:#ffffff;
            }
            .email{
                margin:0px;
                margin-left:1px;
                padding:5px;
                border-width:0px;
                border-radius: 6px 0px 0px 6px;
            }
            .submit{
                margin: -1px;
                margin-left: -5px;
                padding: 6px;
                border-width:0px;
                border-radius: 0px 6px 6px 0px;
                color:#ffffff;
                background-color:#D94E35;
            }
        </style>
    </head>
    <body>
        <div class="inputWrapper">
            <input class="email" type="email" value="" placeholder="email address"/>
            <input class="submit" type="submit" value="Subscribe" />
        </div>
    </body>
</html>


html，正文{
填充：50px；
}
.输入包装器{
显示：内联块；
字体大小：16px；
填充：0px；
边框：1px实心#000000；
边界半径：6px；
背景色：#ffffff；
}
.电邮{
边际：0px；
左边距：1px；
填充物：5px；
边框宽度：0px；
边界半径：6px 0px 0px 6px；
}
.提交{
保证金：-1px；
左边距：-5px；
填充：6px；
边框宽度：0px；
边界半径：0px 6px 6px 0px；
颜色：#ffffff；
背景色：#D94E35；
}

您可以看到它在这里工作：

您的表单框上有两种不同的填充，非常容易修复

从此处更改CSS>

input[type="submit"] {
margin: 0;
padding: 6px 15px; /* Padding set 1px to high, so your getting 2px total extra space */
border: none;
border-radius: 0 6px 6px 0;
font-size: 16px;
line-height: normal;
color: white;
background: #D94E35;
}

对此>

input[type="submit"] {
margin: 0;
padding: 5px 15px; /* Now you should have even paddings */
border: none;
border-radius: 0 6px 6px 0;
font-size: 16px;
line-height: normal;
color: white;
background: #D94E35;
}

不，提交按钮上的额外填充是为了说明缺少边框。看起来很有希望，今晚我会做一些完整的测试，如果一切顺利的话，我会接受它！谢谢你让我知道dabblet！很棒的工具！