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

所以我创建了一个HTML文件，其中有一些字段被加下划线并需要动态填充，但是我无法正确设置它。我需要做的是这样的：带有下划线字段填充的HTML文档

“申请人姓：_________ bar_____________名字：_________ foo_____________”

的第一行，然后：

“学校名称” _Some name_______________________________________________________”

所以我正在动态填写的文本必须在线上，好像它是手工填充的，但是我不知道它的长度，而且我对css很不好。我尝试了一个表格，其中的静态文本是<td>和下划线是另一个<td>，但不能对第二行进行适当的格式化，通过这种逻辑，我将在第一行中具有与第一行中的四个<td>元素具有不同宽度的元素。

来源

2015-12-12 ppepii

使用常规<input type="text">领域，并与相应的CSS样式他们：background: none; border: none; border-bottom: 1px solid black;等等，等等

来源

2015-12-12 18:56:08 Johannes

领域不会通过他们应该看起来像一个文件，要手工填写用户填补，只有信息已经显示在强调。问题是使用动态宽度和下划线设置静态文本的宽度 – ppepii

OH我现在明白了它的工作原理，非常感谢 – ppepii

我不完全确定你的意思，但是如果你只需要没有任何输入功能的行：插入具有'display：inline-block'，'width'您想要的'，高度为1em或更小，'border-bottom：1px纯黑色'的DIV。确切的静态文本宽度是不可预测的（取决于字体，字体大小，浏览器的文本渲染等），但这样你至少可以接近你想要的。 – Johannes

不知道如果我理解正确你的问题，但它看起来像你想要的三种输入类型的姓，名和校名。我用两个独立的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; 
}

来源

2015-12-12 19:03:47 Froy

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

回答

相关问题