Question

所以我在HTML中创建一个文档，其中有一些带下划线的字段需要动态填充，但是我不能正确地设置它。我需要做的是：

“申请人的姓氏：_________ bar_____________名字：_________ foo _____________”

表示第一行，然后是：

“学校名称”_姓名_______________________________________________________“

因此，我动态填写的文本必须在线上，就好像它是手工填充的，但我不知道它的长度，我对css非常糟糕。我尝试使用一个表格，其中静态文本是<td>，下划线是另一个<td>，但无法正确格式化第二行，在这个逻辑中我将有2 <td>宽度不同于第一行中四个<td>元素的元素。

Answer 1

使用常规<input type="text">字段并使用CSS相应地设置它们：background: none; border: none; border-bottom: 1px solid black;等等。

Answer 2

不确定我是否正确理解了您的问题，但看起来您需要三种输入类型的名字，姓氏和学校名称。我使用两个单独的div将它们放在两个不同的行上。

HTML：

  <div class="first">
    <p>Applicant's Last Name: <input type="text" maxlength="20"/>First Name:<input type="text" maxlength="20"/></p>
  </div>
  <div class="sec">
    <p>School Name: <input type="text" maxlength="50"/></p>
  </div>

CSS：

input{
  border: none;
  border-bottom: 1px solid black;
}

带有下划线字段的HTML文档，用于填充

2 个答案: