使网页中的多个输入字段看起来像一个答案

【问题标题】：Making multiple input fields in a webpage look like one使网页中的多个输入字段看起来像一个
【发布时间】：2014-06-13 04:47:59
【问题描述】：

我在 HTML 表格的一行中创建了四个文本输入字段。正如预期的那样，它们显示为四个单独的框。我想让它们看起来像一个长字段，在不同位置有占位符以指示不同的值。我知道删除文本框边框后它可能看起来像一个字段，但是还有其他方法吗？

<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>

【问题讨论】：

我认为你在正确的道路上。删除边框，将它们包裹在 div 中并给它一个边框。它们看起来像一个字段。
请贴标签！给屏幕阅读器用户一个战斗的机会（不，placeholder is not a replacement for label。
@steveax 我使用 .sr-only 类（来自 Bootstrap）包含仅限屏幕阅读器的标签

标签： javascript jquery html css jquery-ui

【解决方案1】：

删除默认margin，在每个over旁边显示inputs，并将边框样式设置为长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; 
}

JSFiddle

【讨论】：