css - 响应式一行文本和输入框

Question

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

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

我想要的是文本和 input 框在同一行，并使 input 框与父 div 的大小一起缩放，响应式设计。

JSFiddle

帮助将不胜感激:)

Answer 1

只需添加这行额外的 CSS -

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

Fiddle Demo

您还可以在 div 上使用 - display: table-cell 来模仿 table cell，类似地，您有 display: table-row, table-column 等。它们为 div 实现类似表格的行为。