Question

I’m a developer with limited HTML/CSS design experience. I have been stuck trying to create this simple form for over an hour so I’m giving up and asking for help.

I tried doing something like this:

<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;
}

I have no idea how I can express that I want the span to take up 100% of the width between the label and the containing div.

I would like the rendered HTML to look exactly like my example image. That is, the entire list item should not be underlined, only the space where the customer is to fill in the information.

Please let me know how I can achieve this. Thank you!!!

Answer 1

Here’s a simple example of what you want to do. Basically, you give the li a bottom border, and overlap it with the label‘s border to cover up the black line.

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

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

---

I’m not sure how cross browser the above solution is, so you might want to use a few extra directives, just in case (untested):

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

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

---

Cross browser solution (as far as I can tell):

Thanks to @Joseph, there’s this solution to a thin line being displayed under the label.