align control using ul-li tags
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   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>
Dated <asp:TextBox ID="TextBox2" runat="server" Width="87px">30 AUG 2011</asp:TextBox></li>
<li class="a">Reference
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox></li>
<li class="a">Subject
<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox></li>
</ul>
http://i55.tinypic.com/9um24h.jpg
is there a work around to have a neat tabular design using ul?
Re: align control using ul-li tags
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>
Re: align control using ul-li tags
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?
Re: align control using ul-li tags
That looks as though it ought to be a <form>, with <label>s.
