I'm editing someone other's code, there's an existing form and css file, what I did is that I added 5 "select" tags into the form, and I want to make the selects inline.Each select has a label, so I put them two in a div, thus I have 5 divs.I want to put the first 3 div in one row, and last 2 in another row.I was working on the css file for hours to get things work, but still failed. The problem I'm getting now is that I cannot put the s in the same line, each of them occupies a separate line, so I have 5 rows in the form now... but I just need 2 rows.Please help me on that, not quite familiar with CSS.\[code\]<html><link rel="stylesheet" href="http://stackoverflow.com/questions/15541002/css/mrbs.css.php" type="text/css"> <link rel="stylesheet" media="print" href="http://stackoverflow.com/questions/15541002/css/mrbs-print.css.php" type="text/css"> <form id="add_room" class="form_admin" action="addsystem.php" method="post"> <fieldset> <legend>Add System</legend> <div id="sdw-div" style="white-space:nowrap; display:inline"> <label for = "sdw">sdw:</label> <select id="sdw" name="sdw" style="display:inline"> <option selected="selected" value="http://stackoverflow.com/questions/15541002/0">0</option> <option value="http://stackoverflow.com/questions/15541002/1">1</option> <option value="http://stackoverflow.com/questions/15541002/2">2</option> <option value="http://stackoverflow.com/questions/15541002/3">3</option> <option value="http://stackoverflow.com/questions/15541002/4">4</option> </select></div> <div id="etl-div" style="white-space:nowrap; display:inline"> <label for = "etl">etl:</label> <select id="etl" style="display:inline" name = "etl"> <option selected="selected" value="http://stackoverflow.com/questions/15541002/0">0</option> <option value="http://stackoverflow.com/questions/15541002/1">1</option> <option value="http://stackoverflow.com/questions/15541002/2">2</option> <option value="http://stackoverflow.com/questions/15541002/3">3</option> <option value="http://stackoverflow.com/questions/15541002/4">4</option> </select></div><div id="hdm-div" style="white-space:nowrap; display:inline"> <label for = "hdm">hdm:</label> <select id="hdm" style="display:inline" name = "hdm"> <option selected="selected" value="http://stackoverflow.com/questions/15541002/0">0</option> <option value="http://stackoverflow.com/questions/15541002/1">1</option> <option value="http://stackoverflow.com/questions/15541002/2">2</option> <option value="http://stackoverflow.com/questions/15541002/3">3</option> <option value="http://stackoverflow.com/questions/15541002/4">4</option> </select></div><strong>.........other two are just the same....</form></html></strong>\[/code\]and here is the css file for form_admin\[code\]form.form_admin {float: left; clear: left; margin: 2em 0 0 0}.form_admin fieldset {float: left; width: auto; border: 1px solid <?php echo $admin_table_border_color ?>; padding: 1em}.form_admin legend {font-size: small}.form_admin div {float:left; clear:left;}.form_admin label { display: block; float: left; clear: left; width: <?php echo $admin_form_label_width ?>em; min-height: 2.0em; text-align: right;}.form_admin input { display: block; float: left; clear: right;</strong> width: <?php echo $admin_form_input_width ?>em; margin-top: -0.2em; margin-left: <?php echo $admin_form_gap ?>em; font-family: <?php echo $standard_font_family ?>; font-size: small;}.form_admin select { display: block; float: left; clear:right; margin-left: 1.0em;}.form_admin input.submit { width: auto; margin-top: 1.2em; margin-left: <?php echo number_format(($admin_form_gap + $admin_form_label_width), 1, '.', '')?>em}\[/code\]
How to make these two <div> inline?
- Thread starter Cubic
- Start date