0

Dear all,

I have some textboxes for user to fill in data. The box has the same width. But I cannot align them vertically and neatly. It always have some difference in their horizontal position.

Please suggest any method to arrange text box or label neatly.

Thanks!

2
Contributors
1
Reply
2
Views
7 Years
Discussion Span
Last Post by scrappedcola
0

There are a couple of things you can do. I would suggest placing the label's and input boxes in containing elements (such as div's) that have uniform widths.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"><META http-equiv="Content-Type" content="text/html; charset=utf-8">
 
<HTML xmlns="http://www.w3.org/1999/xhtml">
    <head>
	<style>
	    .labelCont,
	    .inputCont
	    {
		float:left;
		width:49%;
		margin-bottom:10px;
	    }
	    .labelCont{
		text-align:right;
		margin-right:10px;
	    }
	    .inputCont{
		text-align:left;
	    }
	</style>
    </head>
    <body>
	<div class=labelCont>This is a label</div>
	<div class=inputCont><input type=text /></div>
	<div class=labelCont>This is a label with slightly larger text</div>
	<div class=inputCont><input type=text /></div>
	<div class=labelCont>This is a label width less text</div>
	<div class=inputCont><input type=text /></div>
    </body>
</html>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.