在网页中创建多个输入字段看起来像一个

Question

我在HTML表格的一行中创建了四个文本输入字段。与预期一样，它们显示为四个独立的盒子。我想让它们看起来像一个长场，在不同的位置放置了placehohlders来表示不同的值。我知道当我删除文本框边框时，它可能看起来像一个字段，但还有其他方法吗？

<form>
<table>
 <tr>
 <input type="text" id="project" placeholder="project">
 <input type="text" id="task" placeholder="task">
 <input type="text" id="skill" placeholder="skill">
 <input type="text" id="phase" placeholder="phase">
 </tr>
</table>
</form>

Answer 1

删除默认margin，在每个input旁边显示input，并在长input{ display:table-cell; margin:0; border-width: 1px 0 ; } input:first-child{ border-width: 1px 0 1px 1px; } input:last-child{ border-width: 1px 1px 1px 0; } 上显示样式边框：

{{1}}

JSFiddle