Home/ Questions/Q 7757593
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T13:08:12+00:00

I’m doing a layout for an account page. And I’m thinking my code looks

  • 0

I’m doing a layout for an account page. And I’m thinking my code looks horrible because I am trying to avoid using tables. Here is a screen shot of what I want to get:
enter image description here

Right now, I’m using something like this (see jsfiddle): http://jsfiddle.net/uaUtq/7/

Here it is for quick review:

<ul class="info_list">
    <li>
        <label>First name</label>
        <div><input type="text" /></div>
    </li>
    <li>
        <label>Email</label>
        <div>
            <p>john@gmail.com (Default)</p>
            <input type="text"/></div>
    </li>
    <li>
        <label></label>
        <div>
            <input type="checkbox" />Tickbox
        </div>
    </li>
</ul>​

It feels ugly and complicated. What way would you advise to do it?

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    i think you should use div instead of li
    like this

    <div>
    <div class="label">First Name</div>
    <div class="element"><input type="text"/></div>
</div>
<div>
    <div class="label">Email</div>
    <div class="element"><input type="text"/></div>
</div>

    and write CSS class for label and control to proper alignment i.e. margin, padding, float, etc.

    • 0