Html Question posted in
Some basic documentation can be found here.

Html – How do I align my <label> beside my <input type>?

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:
image

.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>

Tags:

3

Answers


  1. 0

    by changing your css to this:

    .container {
    margin: 0 auto;
    width: 100%;
    padding: 20px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    text-align: center; 
}

.input-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0;
}

input[type="number"] {
    padding: 8px;
    width: 10%;
}

label {
    font-family: "Times New Roman", Times, serif;
    flex-grow: 1;
    text-align: right; 

}

    it should fix your issue

    Login or Signup to reply.
  2. 0

    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:

      <div class="container">
   <hr />
   <h4>1. PROFESSIONALISM AND INTERPERSONAL RELATIONSHIP</h4>
   <br /><br />
   <hr />
   <div class="question-container">
    <label for="q1">
      1.1 Is generally liked by administration officials and co-faculty
      members for being diligent, sincere, respectful, approachable and
      cooperative.
    </label>
    <input type="number" id="q1" name="q1" min="1" max="5" required />
  </div>
  <br />
</div>

    and the updated CSS:

    .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%;
}

label {
  display: inline;
  flex-direction: column;
  width: 100px;
  font-family: 'Times New Roman', Times, serif;
}

.question-container {
  display: flex;
  gap: 8px;
 }

 .question-container input {
   align-self: center;
 }

.question-container label {
  flex: 1;
 }

    Live Demo

    More about the label element

    Login or Signup to reply.
  3. 0

    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-group

    .input-group{
  display: flex;
  align-items: center;
  margin: 10px 0;
}

    Here is the JSFiddle example of the code: JSFiddle Example of code.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search