CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Saurabh Kumar
Saurabh Kumar

Reputation: 16671

Align 3 <select> boxes in a row

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.

enter image description here

How i can align them in a row ?

Upvotes: 1

Views: 4567

Answers (3)

NIA
NIA

Reputation: 2543

Select is not a block-level element, so they would be in row without any floating if you didn't wrap them into different divs and placed into the same div instead.

Currently your structure is like this (shortened):

<div class="control-group">
  <div class="controls">
      <select>...</select>
  </div>
</div>
<div class="control-group">
  <div class="controls">
      <select>...</select>
  </div>
</div>
...

If you instead put all selects into the same div.controls, you will get what you want:

<div class="control-group">
  <div class="controls">
      <select>...</select>
      <select>...</select>
      ...
  </div>
</div>

If this still doesn't help, then probably there is some mess in your CSS styles. In this case ensure that your selects has inline-block display property by adding select{display:inline-block} to your CSS or setting style attribute on select tag itself: <select style="display:inline-block">

UPD: From the names of your classes I derive that you are trying to make a horizontal form. In this case meaning of classes is following:

  • <div class="control-group"> wraps the pair of label and controls row:
    • <label class="control-label> is the label of that row, it will be to the left
    • <div class="controls"> is the row of contols that will be to the right of label

So, the div with class="controls" is meant by Bootstrap devs to be the row of controls. That's why if you want controls to be in a row — just put them all into this one div.

Also, you should wrap all your code into <form class="form-horizontal> in order to have proper margins and alignment. Read the docs on Bootstrap forms for more details.

Upvotes: 4

nate
nate

Reputation: 815

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!

Upvotes: -1

mooonli
mooonli

Reputation: 2393

You could float the parent DIV (which is over all the selects) to left with CSS using:

float:left;

Greets Marc

Upvotes: 0

Related Questions