如何创建与内联输入具有相同高度和对齐方式的内联 div？答案

【问题标题】：How to create an inline div with same height and alignment as inline input?如何创建与内联输入具有相同高度和对齐方式的内联 div？
【发布时间】：2014-11-15 05:27:34
【问题描述】：

我目前正在尝试创建这样的东西：

输入右侧有一个 div（带有复选框和标签），正确对齐并具有相同的高度（因此看起来像 1 个完整的框）。

这是我的代码的 JSfiddle：http://fiddle.jshell.net/asfo3u97/3/

目前，我无法让它看起来与跨浏览器相同。在 Firefox 中，上面的 JSfiddle 示例看起来不错（一切都对齐并且高度相同）。但是，在 Chrome 中，右侧的 div 没有正确对齐。与 iOS 相同

【问题讨论】：

您的相关最小 HTML 是什么？
我认为大卫试图告诉你的是，你的问题缺少MCVE。最好为您的问题创建一个fiddle.jshell.net。
我要在这里赌一把，它缺少 display: inline-block 和 float:left;

标签： css input cross-browser alignment height

【解决方案1】：

最终解决方案，使用 display:table-cell 和 display:table-row，侧 div 没有额外的填充 http://fiddle.jshell.net/asfo3u97/8/

【讨论】：