Question

I have this HTML:

<div>
    <label>field 1</label>
    <input type="text">
    <label>field 2</label>
    <input type="text">
    <label>field 3</label>
    <input type="text">
</div>

How can I make a label-input pair use 100% of the width with CSS ? (and each pair be on their own line)

I used to put the label-input pair in a sub div of their own. But I’m wondering if there’s a way to do it with just CSS. (I’m using compass to generate the CSS).

For bonus points .. can you have the same CSS make the label a line above on mobile (small screen) devices.

Thanks heaps.

Answer 1

Sort of like this? http://jsfiddle.net/m6pZH/13/

---

I suggest you modify your HTML slightly, as it will be hard (if even possible) to properly maintain your current HTML properly:

<ul>
    <li>
        <label>field 1</label>
        <input type="text" />
    </li>

    <li>
        <label>field 2</label>
        <input type="text" />
    </li>

    <li>
        <label>field 3</label>
        <input type="text" />
    </li>
</ul>

CSS:

li {
    display: block;
    overflow: auto;
}

li > label {
    float: left;
}

li > input {
    width: auto;
    float: right;
}