CSS to align label and input

by in , 0

HTML Code Snippet:
<fieldset id="o-bs-sum-buginfo">
  <label for="o-bs-sum-bug-ErrorPrefix">Error Prefix</label>
  <input type="text" id="o-bs-sum-bug-ErrorPrefix" name="ErrorPrefix" value="" />

  <label for="o-bs-sum-bug-ErrorNumber">Error Number</label>
  <input type="text" id="o-bs-sum-bug-ErrorNumber" name="ErrorNumber" value="" />
  ....
</fieldset>
Using only CSS (or jquery), irrespective of the browser size, I want to pair label and input elements next to each other. I also do have freedom to change tweak the HTML. if required.



Put the every label with its corresponding input into a p tag. Then add the following css:
label{
  float:left;
  width:100px; //whatever width that suits your needs
}

p{
    margin:10px 0; //manipulate the vertical spaces for each input..  
}



<fieldset >
  <p>
    <label for="o-bs-sum-bug-ErrorPrefix">Error Prefix</label>
    <input type="text"  name="ErrorPrefix" value="" />
  </p>
</fieldset>

Leave a Reply