带下划线的 HTML 表单用于手写信息
我需要用 HTML 制作一些表格，客户需要打印这些表格并手工编写一些条目，然后扫描或传真。
所以我希望有一个像“Sign ____________”这样的签名区域，
如果下划线的长度有限，那么下划线都很好，但是如果我有很多行需要一直穿过页面（或者在某些情况下）怎么办？案例表格单元格），每个前面都有一些文本？
所以：
Item 1: ____________
An Item 2: _________
This is item 3: ____
1 more item: _______
问题是，如果我使用下划线，下划线不会在相同的位置结束，并且看起来错误或者会扭曲单元格的大小。最好的办法是在空白下划线，但这是不可能的。
I need to make some forms in HTML that a customer will need to print and write some entries by hand then scan or fax.
So I want there to be an area for signing like "Sign ____________"
Underscores are all good if the underline is a limited length, but what if I have a number of lines that need to go all the way across the page (or in some cases table cell) with some text in front of each??
So:
Item 1: ____________
An Item 2: _________
This is item 3: ____
1 more item: _______
The trouble is if I use underscores, the underscores don't finish at the same places and it looks wrong or it warps the size of the cell. The best thing would be to underline white space but that's just not possible.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
因此，构建一些带有
border-bottom的块元素。这些看起来像下划线，你可以调整颜色、粗细等等。一个务实的解决方案：我会将每一行设为一个 2 列表，左列（带有文本）的宽度为
0%（这将扩展到最小需要）和右栏（带下划线的空）宽度为 100%（将占用剩余空间）；我将一个带有底部边框的空块放入右侧的表格单元格中。我的这个设计违反了许多其他网页设计师所持有的一些理想。我并不是说这是一个很棒的或非常符合标准的设计，我只是声称它很简单而且很有效。
So build some block elements with a
border-bottom. Those will look like underlines and you can play with colors, thicknesses and whatnot.A pragmatic solution: I would make each line a 2-column table, give the left column (with the text) a width of
0%(which will expand to the minimum needed) and the right column (empty with underline) a width of100%(which will take up the remaining space); and I'd put an empty block with a bottom border into that right table cell.This design of mine violates some ideals held by many other Web designers. I'm not saying this is a fantastic or very standards-compliant design, I only claim it's simple and it works.
将其包裹在
。它将使用等宽字体，因此您的下划线“行”将在同一位置结束。
您可能已经注意到上面的问题中也发生了这种情况;-)
Wrap it in
<pre> tags </pre>.It will use a monospaced font so your underscore 'lines' will end at the same position.
You may have noticed this also happens in your question above ;-)
尝试使用 CSS 规则，例如
or
Try using a CSS rule like
or
不久前，我自己尝试寻找解决方案。所以，关键是：
实际上是可能的，只是
下面是一个表单示例，其中字段彼此内联放置：
这是一个表单示例，其中字段组织在彼此之上，并且 ___ 部分向右，受到 div 右边界的限制，并且不会不必要地换行：
希望有帮助。
Tried to find the solution myself, a while ago. So, the key is:
It actually is possibe, just
<u> </u>or<u> </u>.Here's an example of a form, where fields are placed inline to each other:
And here's an example of form, where fields are organized on top of each other, and ___ part goes right, is limited by right bondary of div, and doesn't wrap unnecessarily:
Hope it helps.