简单的HTML下划线

Question

我正在创建一个HTML格式的表单，这些表单将被打印，并且需要由接收方写入的字段。基本上我想要的是从字段标签末尾延伸到页面一侧的单行。以下是我正在做它现在：

<table width="100%"> 
    <tr> 
     <td width="1%"> 
      Label: 
     </td> 
     <td style="border-bottom-style:solid; border-bottom-width:1px;"> 
      &nbsp; 
     </td> 
    </tr> 
</table> 

这工作，但必须有要做到这一点，而不需要一个完整的表元素的简单方法。有任何想法吗？

Answer 1

我认为你的解决方案比迄今为止的回应要好。我唯一会改变你的解决方案是我会使用一个CSS类而不是内联。

与使用跨度相比，您的解决方案将具有更好的对齐方式。你的代码看起来比表格元素更清晰，也比跨度更清晰。

另外，您可能需要考虑在单元格中放置文本框，以便用户可以在打印之前直接在页面上输入信息。

Answer 2

如何使用span标签？

<span style="border-bottom....">Text</span> 

Answer 3

这里是我的CSS：

span.print_underline 
{ 
    display: inline-block; 
    height: 1em; 
    border-bottom: 1px solid #000; 
} 

所以你的HTML看起来像：

<span class="print_underline" style="width: 200px">&nbsp;</span> 

我留下的宽度了，这样我就可以重新使用它，就像我想要的，但你可以指定宽度。

作为一个旁注，我使用div标签而不是span标签测试了相同的概念，并且在某些情况下它不起作用。这可能是因为将div放在段落标记中是语义错误（这就是为什么我使用了跨度），而且我通常使用段落标记而不是像使用过的那样使用表格行。

Answer 4

只有一个div，左边有适当的边距。块元素默认总是展开为全宽。

含义：

 

label { 
    float: left; 
} 

div { 
    margin-left: 10em; 
    border-bottom: 1px solid black; 
    height: 1em; 
} 

<label>label:</label>

<div></div>

它不会延长标签和右侧之间的全宽，但你可以有标签隐藏底部边框（使用背景颜色或其他东西），并让div一直向右扩展（没有边距）。

如果您想要正确的语义，您甚至可以使用输入而不是div，将其设置为“阻止”并修复边框和背景。