How to style an inline form - css

Question

I am trying to create a simple label and select box for a form.
I want this: [LABEL] [SELECT BOX]. Inline. All on the same line. Simple, eh?
Yet when I use the inline form element from bootstrap, it wraps the box:
<form class="form-inline" role="form">
<label for="sort-values">Sort:
<select id="sort-values" class="form-control">
<option value="2">Distance</option>
<option value="3">Rating</option>
<option value="4">Price</option>
</select>
</label>
</form>
What am I missing? Example here: http://bootply.com/79458

Answer 1

The width of the element .form-control is the problem..
.form-control {
width: 100%;
}
It is currently at 100%.. if you want it to work, you can either remove the width completely.. or just specify a smaller width, such as 200px;
Forked example here

Answer 2

You can use two methods for linking label and select. First method: id for select and attribute for for label. Second: including select inside of label. Not necessary use both of them.
Code:
<form class="form-inline" role="form">
<label class="control-label" for="sort-values">Sort:</label>
<select id="sort-values" class="form-control">
<option value="2">Distance</option>
<option value="3">Rating</option>
<option value="4">Price</option>
</select>
</form>
Example: http://bootply.com/79462