Question

My html is as follows . I am using twitter bootstrap.

<div class="container">
  <div class="well span4 pull-right">
    <s:bind path="month">
      <label class="control-label" for="month">Date of birth</label>
      <div class="control-group <c:if test="${status.error}">error</c:if>">
        <div class="controls">
          <div class="input-prepend">
            <span class="add-on"><i class="icon-th"></i></span>
            <form:select path="month" class="input-medium inline">
              <form:option value="">Month</form:option>
              <form:option value="1">January</form:option>
              ...
              <form:option value="12">December</form:option>
            </form:select>
          </div>
        </div>
      </div>
    </s:bind>

    <s:bind path="day">
      <div class="control-group <c:if test="${status.error}">error</c:if>">
        <label class="control-label" for="day"></label>
        <div class="controls">
          <div class="input-prepend">
            <span class="add-on"><i class="icon-th"></i></span>
            <form:select path="day" class="input-small">
              <form:option value="">Day</form:option>
              <form:option value="1" />
              ...
              <form:option value="31" />
            </form:select>
          </div>
        </div>
      </div>
    </s:bind>

    <s:bind path="year">
      <div class="control-group <c:if test="${status.error}">error</c:if>">
        <label class="control-label" for="year"></label>
        <div class="controls">
          <div class="input-prepend">
            <span class="add-on"><i class="icon-th"></i></span>
            <form:select path="year" class="input-small">
              <form:option value="">Year</form:option>
              <form:option value="2010" />
              ...
              <form:option value="1940" />
            </form:select>
          </div>
        </div>
      </div>
    </s:bind>
  </div>
</div>

Currently they are aligned as shown in the snapshot.

How i can align them in a row ?

Answer 1

Simple solution would be to put them in a table!

    <table border="0">
<tr>
<td>

Select 1

</td>
<td>
Select 2

</td>
<td>

Select 3


 </td>
 </tr>
 </table>

Easy to do and works well!