Question

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

Simple Form Example

我尝试过这样的事情：

<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

Here's a simple example你想做什么。基本上，您为li提供一个底部边框，并将其与label的边框重叠以覆盖黑线。

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

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

我不确定上述解决方案是如何跨浏览器的，所以你可能想要使用一些额外的指令just in case（未经测试）：

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

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

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

感谢@Joseph，标签下面会显示一条细线this solution。

Answer 2

修改

是的......我更喜欢my adaptation of JamWaffles' answer（评论）。他应该得到信用。：P

<强> Demo

这是一种非常黑客的做法：P

HTML

<ul>
    <li><label>Name:</label></li>
    <li><label>Address:</label></li>
    <li><label>City:</label></li>
    <li><label>State:</label></li>
    <li><label>Zip:</label></li>
</ul>

CSS

li label {
    margin-bottom:-1px;
    display: inline-block;
    border-bottom: 1px solid #fff;
    padding-right:10px;
}

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

Answer 3

好的，我真的很讨厌回答我自己的问题，但这似乎是实现这一结果的最不实便的方法。我会让投票决定。再次感谢所有的帮助。我无法相信我花了多长时间搞清楚这一点！

Solution using display:table-cell

li label {
    display: table-cell;
}

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

<ul>
    <li><label>Name:</label><span></span></li>
    <li><label>Address:</label><span></span></li>
    <li><label>City:</label><span></span></li>
    <li><label>State:</label><span></span></li>
    <li><label>Zip:</label><span></span></li>
</ul>

Answer 4

在您希望拥有border-bottom

的范围中添加一个类

示例

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

Answer 5

有趣的概念。我会解决这个问题：

<style type="text/css">
    input.line {
        border: 0;
        border-bottom: 1px solid #000;
    }
</style>

<ul><li><label for="name">Name: </label><input class="line" name="name" /></li><br />
<li><label for="address">Address: </label><input class="line" name="address" /></li><br />
<li><label for="city">City: </label><input class="line" name="city" /></li><br />
<li><label for="state">State: </label><input class="line" name="state" /></li><br />
<li><label for="zip">ZIP: </label><input class="line" name="zip" /></li></ul><br />

编辑这是一个功能表单的代码，你可以将其输入，我没有意识到你只想要下划线。无论哪种方式，这个解决方案都适用于两者。

Answer 6

Here's a solution：

HTML：

<ul>
    <li><span class="label">Name:</span><span class="line name"></span></li>
    <li><span class="label">Address:</span><span class="line address"></span></li>
    <li><span class="label">City:</span><span class="line city"></span></li>
    <li><span class="label">State:</span><span class="line state"></span></li>
    <li><span class="label">Zip:</span><span class="line zip"></span></li>
</ul>

的CSS：

ul {width: 300px;}

.line {
    float: left;
    display: inline-block;
    border-bottom: 2px solid black;
    margin-left: 5px;
    width: 100%;
    margin-top: -5px;
}

.label {
    display: inline-block;
    background-color: white;
    margin-top: 10px;
    padding-right: 5px;
}


li span {font-family: sans-serif;}

li {line-height: 1.3em;}

Answer 7

为了将来参考，这是另一种方法：http://jsfiddle.net/thirtydot/7SFDV/。

唯一真正的区别（在您的回答中）是它可以在IE7中工作，这可能与您无关。我不知道它是否适用于您的“专有HTML＆gt; PDF渲染器”。

li {
    overflow: hidden;
    margin: 8px 0
}
li label {
    float: left;
    margin-right: 3px
}
li span {
    display: block;
    overflow: hidden;
    border-bottom: 2px solid #000;
    line-height: 1.1
}

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

7 个答案:

修改

HTML

CSS