I'm trying to create an input form on a web page, and I want all of the input elements to be lined up along a certain column. My idea was to use absolute positioning to just shift all of the input elements over to a specific point on the page. It's working fine, except for one problem: the input elements are overlapping with each other a little bit, vertically.
Here's a MVCE:
<!DOCTYPE html>
<html><head>
<style>
span.right_align {
display: inline;
position: absolute;
left: 80px;
}
div.form_container {
position: relative;
}
</style>
<title>World's Best GUI</title></head>
<body type="text/css" style="background-color: #F7D879; font-family: Georgia, serif">
<div class="form_container">
<form name="guiForm" method="post" action="return false;">
Input 1: <span class="right_align"><input type="text"></span><br>
Input 2: <span class="right_align"><select autocomplete="off">
<option value="yes">Yes</option>
<option value="no">No</option></select></span><br>
Input 3: <span class="right_align"><input type="text" size="50"></span><br>
Input 4: <span class="right_align"><input type="text"></span>
</form>
</div>
</body>
</html>
As far as I can tell, the problem is because the font is smaller than the size of the input box, but it's the size of the font that determines where a new line "begins". If you comment out or remove everything in the right_align class, they stop overlapping (but they also stop lining up so nicely).
I'll also note that the reason I went for the span-class solution is because I need to 1) have some lines dynamically disappear and reappear, depending on the current state of a drop-down, and 2) dynamically create new input items that will also line themselves up nicely. This seemed like a solution that would interfere very little with the current workings of my web page.
Is there a simple way to fix this? Should I be creating these columns in an entirely different way? I'm open to totally new ideas as well.
EDIT: someone suggested I create a jsfiddle, so I did: http://jsfiddle.net/uy9comxk/
EDIT 2: there will be lines where I have multiple inputs that have to appear beside each other on the same line (for date inputs). I didn't include them because it would have increased the MCVE size by a lot.
In your css, use a line-height and it will work:
div.form_container {
position: relative;
line-height: 25px;
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments