如何在HTML中创建这个简单的表单示例？

Question

我是一名HTML/CSS设计经验有限的开发人员.我一直试图创建这个简单的表格超过一个小时,所以我放弃并寻求帮助.

我尝试过这样的事情:

<ul>
    <li><label>Name:</label><span class="line">&nbsp</span></li>
    ...
</ul>

li label {
    display: inline-block;
}

li span {
    display: inline-block;
    width: 100%;
    border-bottom: 1px solid #000;
}

我不知道如何表达我希望跨度占据标签和包含div之间宽度的100%.

我希望渲染的HTML看起来与我的示例图像完全一样.也就是说,整个列表项不应加下划线,只应填写客户填写信息的空间.

请让我知道如何实现这一目标.谢谢!!!

Answer 1

这是您想要执行的操作的一个简单示例。基本上，您给li一个底部边框，并将其与 的label边框重叠以覆盖黑线。

li
{
    border-bottom: 1px solid black;
    width: 250px;
}

label
{
    border-bottom: 2px solid white;
    padding-right: 5px;
}

我不确定上述解决方案的跨浏览器性能如何，因此您可能需要使用一些额外的指令，以防万一（未经测试）：

li
{
    border-bottom: 1px solid black;
    width: 250px;
}

label
{
    background: white;
    position: relative;
    border-bottom: 2px solid white;
    padding-right: 5px;
}

跨浏览器解决方案（据我所知）：

感谢@Joseph，有一个解决方案可以在标签下显示一条细线。