align control using ul-li tags

**jlbantang** · Apr 9th, 2011, 04:35 AM

hi team,

I was thinking if there is a way to create a tabular layout using UL - LI. though this can be done using simple table the ul give a neat and easy to read markup. the &nbsp non-breaking space doesn't work for some time (see link image).

HTML

Code:

        <ul class="ul_wrap" >
            <li class="a">Event Code <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            Dated <asp:TextBox ID="TextBox2" runat="server" Width="87px">30 AUG 2011</asp:TextBox></li>        
        
            <li  class="a">Reference &nbsp;&nbsp;
                <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox></li>
            <li class="a">Subject &nbsp; &nbsp; &nbsp;
                <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox></li>
</ul>

is there a work around to have a neat tabular design using ul?

**coothead** · Apr 10th, 2011, 08:26 AM

Hi there jlbantang,

here is an example for you to try...

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>form layout</title>

<style type="text/css">
body {
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:16px;
    background-color:#f0f0f0;
 }
#container {
    width:256px;
    padding:20px;
    margin:0 auto;
    border:3px double #90979d;
    background-color:#fcfcfc;
    list-style-type:none;
 }
#container li {
    margin-bottom:5px;
 }
#container label {
    float:left;
    width:100px;
    font-size:90%;
 }
#container input {
    width:150px;
    border:1px solid #90979d;
 }
</style>

</head>
<body>

<form action="#">
<ul id="container">
 <li><label for="evc">Event Code</label><input id="evc" type="text"></li>
 <li><label for="ref">Reference</label><input id="ref" type="text"></li>
 <li><label for="sub">Subject</label><input id="sub" type="text"></li>
</ul>
</form>

</body>
</html>

**tr333** · Apr 10th, 2011, 07:01 PM

Any particular reason why you need to use ul/li? Why force a "list" to look like a "table" when you have <table> or CSS tables?

**penagate** · Apr 10th, 2011, 08:13 PM

That looks as though it ought to be a <form>, with <label>s.

Thread: align control using ul-li tags

Thread Tools

Display

align control using ul-li tags

Re: align control using ul-li tags

Re: align control using ul-li tags

Re: align control using ul-li tags

Posting Permissions