In my CSS-styled form that resembles a table, the two input elements are displaying on top of each other instead of side by side. How can I adjust them to appear next to each other?
There is a possibility that this issue could be browser-specific. The form is currently being viewed on IE 11.0.14393.0 running on Windows 10.
div,
a {
font-family: Segoe, "Segoe UI", sans-serif
}
.FormContainer form {
display: table;
}
.FormContainer form div {
display: table-row;
}
.FormContainer form div label,
.FormContainer form div input {
display: table-cell;
margin: 5px 0px;
}
.FormContainer form div label {
vertical-align: middle;
padding-right: 10px;
}
.FormContainer form div input[type=text] {
min-width: 200px;
}<body>
<div>
<p><font size="6"><u><strong>Search Users</strong></u></font></p>
<p>Search for...</p>
</div>
<div class="FormContainer">
<form action="SearchNewestUsers.php" method="post">
<div>
<label for="UserCount">Newest users</label>
<input type="text" name="UserCount" id="UserCount" placeholder="Enter number of users...">
<input type="submit" name="SearchButton" id="SearchButton" value="Search">
</div>
</form>
</div>
</body>The code snippet provided results in the following layout: