Question

我有一个问题，我的文本字段的高度和我的选择框的高度是不一样的，应该是什么时候。这就是我所拥有的： HTML：＆lt; div class =“content”＆gt; ＆lt; ul class =“flex-container”＆gt; ＆lt; li class =“flex-item”＆gt; ＆lt; select id =“idType”＆gt; ＆lt; option value =“1”＆gt; 1＆lt; / option＆gt; ＆lt; option value =“2”＆gt; 2＆lt; / option＆gt; ＆lt; option value =“3”＆gt; 3＆lt; / option＆gt; ＆lt; option value =“4”＆gt; 4＆lt; / option＆gt; ＆LT; /选择＆GT; ＆lt; input type =“text”id =“idField”class =“basicInput”placeholder =“Number”/＆gt; ＆LT; /锂＆GT; ＆LT; / UL＆GT; ＆LT; / DIV＆GT; CSS： #idType，＃idField { 宽度：35％ } 选择 { -webkit-appearance：menulist-button; 身高：3vh; 颜色：＃969696; } .basicInput { 身高：3vh; } .flex-container { list-style：none; } 你可以看到我的意思高度应该是相同的，3vh，但它在选择上更轻。任何人都知道如何修复:)？ box-sizing：border-box; -moz-box-sizing：border-box; -webkit-box-sizing：border-box; 这些似乎可以解决问题，谢谢大家！:)

Answer 1

删除填充并在输入上设置框大小为我修复：

#idType, #idField {
    width:35%;
    box-sizing:border-box;
    padding:0;
}

<强> jsFiddle example

Answer 2

不同的输入类型有不同的盒子模型。

如果你将他们规范化：

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

......他们的身高相同

JSfiddle Demo

Answer 3

我可以通过将属性从高度更改为 max-height 来使它们更接近一些，但它们仍然略有不同。请查看之前的帖子：Issue with Input & Select tag height in form

HTML <select>比相同指定高度的其他控件高

3 个答案: