HTML中的下划线文字

Question

我想写下面图像的最简单示例

我的例子应该在ie6,7,8,9等等。所以我不能使用浮动或任何有用的东西。我使用表

制作了jsFiddle

<table width="500px">
    <tr>
        <td width="45px"><span>e-mail</span>
        </td>
        <td align="center"> <div style="border-bottom: 1px solid;">test@gmail.com</div></td>
    </tr>
    <tr>
        <td width="45px"></td>
        <td align="center"> <span>(email)</span>
        </td>
    </tr>
</table>

，但底部（电子邮件）有线的边距。

我希望一切都像我的第一张照片。感谢

Answer 1

我试过这个。 请检查此jsFiddle link

<table width="500px" style="padding:0px; border-spacing:1px">
<tr>
    <td width="45px" style="padding:0px"><span>e-mail</span>

    </td>
    <td align="center" style="padding:0px"> test@gmail.com <hr noshade style="border-top:1px; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-margin-top: 0; -webkit-margin-bottom: 0;"/> </td>

</tr>
<tr>
    <td width="45px" style="padding:0px"></td>
    <td align = "center" style = "margin-top:0px; padding:0px">(email)</td>
</tr>

Answer 2

您所指的“边距”是单元格之间的部分间距，部分填充在单元格内部分，部分引导，部分间隔在字体中。在您的方法中，最简单的修复可能是将单元格间距设置为零，并使用相对定位将单元格内容向上移动一点。

<table width="500" cellspacing="0">
    <tr>
        <td width="45">e-mail
        </td>
        <td align="center"  style="border-bottom: 1px solid">test@gmail.com</td>
    </tr>
    <tr>
        <td width="45"></td>
        <td align="center"><span style="position: relative; top: -0.15em">(email)</span>
        </td>
    </tr>
</table>

Answer 3

• 将border-spacing: 0应用于表格的样式（border-collapse: collapse也可以使用，以及cellspacing属性）
• 将padding: 0添加到包含td
的<span>(email)</span>

增加上层电子邮件地址和下边框之间的空间（您没有明确提及但与示例图片不同）：

• 将border-bottom样式从div移至其父td
• 将padding-bottom添加到同一td