响应一行文本和输入框

Question

使用table制作divs类似内容的最佳/正确方法是什么。

我尝试过不同的方法，position:并使用百分比。

我想要的是同一行上的文字和input框，并使input框缩放为父div的响应式设计。

JSFiddle

帮助将不胜感激：）

Answer 1

只需添加额外的CSS行 -

#box input[type="text"]
{
    width: 100%;
    box-sizing: border-box; /* This line */
}

Fiddle Demo

你也可以使用display: table-cell上的div来模仿table cell，类似地，你有display: table-row，table-column等。他们实现了表格喜欢对div的行为。