Question

嗨我正在制作一个表格所以问题是当我给出同样的高度和宽度输入＆amp;选择标记使选择标记的高度不同于输入标记.....

你能告诉我究竟是什么问题以及选择标签高度的唯一一个像素差异......

以下是您将了解问题的演示： - http://jsfiddle.net/RCnQa/12/

Answer 1

你必须给你的select＆amp;为此也提供box-sizing属性。

select {
    border:1px solid #ccc;
    vertical-align:top;
    height:20px;
}
input, select{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

选中此http://jsfiddle.net/RCnQa/16/

适用于IE8＆amp;上方。

Answer 2

尝试使用box-sizing：

input, select, option {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;  
}
input, select {
    width:100px;
    height:20px;
    border : 1px #ccc solid;
    vertical-align:top;
}

示例小提琴：http://jsfiddle.net/RCnQa/17/

Answer 3

它们永远不会在视觉上相等，您可以使用以下内容更新select css：

select {
    border:1px solid #cccccc;
    vertical-align:top;
    height:23px;
}

Answer 4

我的一个项目中的选择框遇到了同样的问题。我通过更改此处所述的选择框的箭头来修复它，

http://bavotasan.com/2011/style-select-box-using-only-css/

我希望这会有所帮助.....

Answer 5

即使在截至11/21/17的最新Chrome上，仍然需要在选择上设置固定高度。

我更喜欢设置一个service1=http://192.168.70.10:8080/ service2=http://192.168.80.170:9000/shell service3=http://192.168.10.10:8085/ ........ servicen=http://www.sample.com/，因为它对我来说感觉更好，而且还有各种各样的插件可能会影响您可能无法解释的字体大小。这样可以避免种植更安全。

min-height

注意：可以减少垂直填充，因为我们现在正在强制高度。

如果您希望在字体大小更改时更改高度，请使用padding: .25rem .5rem; min-height: 2.5rem; font-size: 1.1em;和padding的电子邮件。

Answer 6

如果您使用的是引导程序，请仅在select中使用form-control类。

<select class="form-control">

Answer 7

使用填充而不是高度可以得到更好的最终结果：

input {
    width:100px;
    vertical-align:top;
    padding:2px; //or whatever you want
}

select {
    border:1px solid #ccc;
    vertical-align:top;
    padding:2px; //same as above
}

Answer 8

重要”在CSS表单控件enter image description here

这对我有用！

输入和输出问题选择表单中的标签高度

9 个答案: