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

align input boxes from start and end – Html

I’m a newbie to web programming I was wondering how to align input boxes from the start and end with css here is the photo
enter image description here

here is the html and css code :

.input{
    color: white;
    text-align: center;
    font-size: 15px;
    font-family: Arial, Helvetica, sans-serif;  
    line-height: 250%;
    align-content: start;
}
<div class="welcome">
  <h1>WELCOME!</h1>
</div>

<form class="input">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br>
  <label for="pnber">Phone number:</label>
  <input type="tel" id="pnber" name="pnber"><br>
  <label for="email">Email:</label>
  <input type="email" id="pnber" name="email">
</form>

trying to align input boxes from start to end

Tags:

2

Answers


  1. 0

    Flexbox will do the job for this:

    .input{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: white;
  text-align: center;
  font-size: 15px;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 250%;
}

label {
  align-self: flex-start;
  margin-bottom: 5px;
}

input {
  padding: 5px;
  border: none;
  border-radius: 5px;
  margin-bottom: 10px;
  width: 300px;
}
    • display: flex; property makes the form container a flex container, allowing you to use flex properties
    • align-items: flex-start; property aligns to the start of the container with vertical axis. align-self: flex-start; for horizontal axis.
    • And margin-bottom property adds some spacing between the label and input elements

    Hope this helps

    Login or Signup to reply.
  2. 0

    Here it is. Hope it’s helpful.

    h1 {
  text-align: center;
}

form {
  display: grid;
  grid-template-columns: 1fr 2fr;
  row-gap: 1rem;
  column-gap: 1rem;
  width: 350px;
  margin: 0 auto; /* to center horizontally */
}
    <div class="welcome">
  <h1>WELCOME!</h1>
</div>

<form class="input">
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname">
    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lname">
    <label for="pnber">Phone number:</label>
    <input type="tel" id="pnber" name="pnber">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search