CODEWITHSUNDEEP
htmlcss
aozora
aozora

Reputation: 421

Aligning textbox and labels in html using css

When I only have 1 label and 1 text box per line. I align them using float:left and float:right then squeeze them by using field set's width.

But what I need to do now is 3 labels and 3 text boxes per line. Any idea how to align them?

Edit: Ignore the name, I just copy pasted so they have same name LOL

<fieldset style='width:auto;margin:auto;' class='hardwareavailabilityadd'>
    <legend>Add Hardware Availability</legend>
       <p>
          <label class='hardwareavailabilityadd'>Hardware Type: </label><input type='text' required name='txtEmpNum' class='hardwareavailabilityadd'>
          <label class='hardwareavailabilityadd'>Repair Priority: </label><input type='text' required name='txtEmpLName' class='hardwareavailabilityadd'>
          <label class='hardwareavailabilityadd'>RTP Target: </label><input type='text' required name='txtEmpFName' class='hardwareavailabilityadd'>
       </p>

       <p>
          <label class='hardwareavailabilityadd'>Hardware Name: </label><input type='text' required name='txtEmpNum' class='hardwareavailabilityadd'>
          <label class='hardwareavailabilityadd'>Date Needed: </label><input type='date' required name='txtEmpLName' class='hardwareavailabilityadd'>
          <label class='hardwareavailabilityadd'>Shortages: </label><input type='text' required name='txtEmpFName' class='hardwareavailabilityadd'>
       </p>

       <p>
          <label class='hardwareavailabilityadd'>Facility: </label><input type='text' required name='txtEmpNum' class='hardwareavailabilityadd'>
          <label class='hardwareavailabilityadd'>Reason: </label><input type='text' required name='txtEmpFName' class='hardwareavailabilityadd' size='60'>
       </p>
</fieldset>

This is what I had in mind to happen

enter image description here

Current look without css

enter image description here

Upvotes: 1

Views: 2705

Answers (1)

Dinei
Dinei

Reputation: 5484

I would suggest you to use one experienced framework that has this in the box, such as Bootstrap... But if you want to do it yourself, one possible approach is the following:

fieldset {
  width: 100%;
}
.row {
  width: 100%;
  clear: both;
}
.row div {
  width: 33%;
  float: left;
}
label {
  display: block;
  float: left;
  width: 40%;
  text-align:right;
}
input {
  width: 50%;
}
<fieldset style='width:auto;margin:auto;' class='hardwareavailabilityadd'>
  <legend>Add Hardware Availability</legend>
  <div class="row">
    <div><label class='hardwareavailabilityadd'>Hardware Type: </label><input type='text' required name='txtEmpNum' class='hardwareavailabilityadd'></div>
    <div><label class='hardwareavailabilityadd'>Repair Priority: </label><input type='text' required name='txtEmpLName' class='hardwareavailabilityadd'></div>
    <div><label class='hardwareavailabilityadd'>RTP Target: </label><input type='text' required name='txtEmpFName' class='hardwareavailabilityadd'></div>
  </div>

  <div class="row">
    <div><label class='hardwareavailabilityadd'>Hardware Name: </label><input type='text' required name='txtEmpNum' class='hardwareavailabilityadd'></div>
    <div><label class='hardwareavailabilityadd'>Date Needed: </label><input type='date' required name='txtEmpLName' class='hardwareavailabilityadd'></div>
    <div><label class='hardwareavailabilityadd'>Shortages: </label><input type='text' required name='txtEmpFName' class='hardwareavailabilityadd'></div>
  </div>

  <div class="row">
    <div><label class='hardwareavailabilityadd'>Facility: </label><input type='text' required name='txtEmpNum' class='hardwareavailabilityadd'></div>
    <div><label class='hardwareavailabilityadd'>Reason: </label><input type='text' required name='txtEmpFName' class='hardwareavailabilityadd' size='60'></div>
  </div>
</fieldset>

Upvotes: 3

Related Questions