I’m trying to make an evaluation form but my label is not aligned with the <input type="number>
I just want it to align right next to <input type="number">
Here’s how it looks:
.container {
margin: 0 auto;
width: 60%;
padding: 20px;
background: rgba(255, 255, 255, 0.8);
border-radius: 8px;
text-align: center;
}
input[type="number"] {
margin: 5px 0;
padding: 8px;
width: 10%;
float: right;
clear: both;
}
label {
display: inline;
flex-direction: column;
width: 100px;
font-family: "Times New Roman", Times, serif;
}
<div class="container">
<hr>
<h4>1. PROFESSIONALISM AND INTERPERSONAL RELATIONSHIP</h4>
<br>
<br>
<hr>
<label>1.1 Is generally liked by administration officials and co-faculty members for being diligent, sincere, respectful, approachable and cooperative.</label>
<input type="number" name="q1" min="1" max="5" required>
<br>
</div>
I tried to put float and clear in input {type="number"]{}
in CSS but the <input type="number">
is still on the bottom right of the <label>
3
Answers
by changing your css to this:
it should fix your issue
First, add the "Id" attribute to the input and the "for" attribute for the label element. Then simply place them into a div as a container and align them next to each other by CSS flexbox.
Here is the updated HTML:
and the updated CSS:
Live Demo
More about the label element
The
clear: both
property is used to move an element below any floated elements, which is the opposite of what you want to achieve.You Just need to do couple of changes like wrap your label and input container into a div let’s call it
input-group
and then just have this CSS properties on input-groupHere is the JSFiddle example of the code: JSFiddle Example of code.