Question

我正在尝试使用具有不同类型属性但具有不同高度问题的输入元素。在chrome输入类型中：time看起来比type：number更高。为了说明这个问题，我已经将它简化为骨头：http://jsfiddle.net/4jteqy1f/

HTML

<article class="settings">
    <ul>
        <li>
            <input type="time" value="00:00">
        </li>
        <li>
            <input type="time" value="00:00">
        </li>
        <li>
            <input type="number" value="286">
        </li>
    </ul>
</article>

CSS

.settings ul li{
    display: inline-block;
    padding:5px;
    background-color: #dee7f8;
}

在示例中，类型编号的输入看起来小于其他输入字段，至少在chrome中。在最新的Internet Explorer中，它看起来很好。为什么会发生这种情况？可能的解决方案是什么？

Answer 1

您可以将此行添加到CSS：

input{padding: 0 0 0 3px; height: 20px; vertical-align: middle;}

基本的想法是为上下按钮提供足够的空间，即20px，然后vertical-align: middle来影响值（不过它会影响DOM元素，如箭头）

查看代码并了解大小，以便了解其工作原理

.settings div li{
	display: inline-block;
    padding:5px;
	background-color: #dee7f8;
}
input{padding: 0 0 0 3px; height: 20px; vertical-align: middle;}

<article class="settings">
    <div>
        <li>
            <input type="time" value="00:00">
        </li>
        <li>
            <input type="time" value="00:00">
        </li>
        <li>
            <input value="286">
        </li>
    </div>
</article>

不同的输入类型（时间，数量）在铬中具有不同的高度

1 个答案: