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="" />
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:
  width:100px; //whatever width that suits your needs

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

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

Leave a Reply