使输入字段和响应

Question

I have 3 element - input field, dropmenu and a button. After few hours of trying, I still unable to place them in a row and responsive. I used float but it seem to break when I resize the windows.

<form>
    <div class="tasksInput">
        <input placeholder="Insert" type="text" class="form-control " />
    </div>
    <select>
        <option value="">Option</option>
    </select>
    <button type="submit" class="btn btn-primary">Submit </button>
</form>

http://jsfiddle.net/VgwL8/1/

Answer 1

FIXED DEMO

I gave the input wrapper margin in is left side for both select and submit button. and add wrapper to button + select + position absolute that relative to the form.

HTML

<form>
    <div class="tasksInput">
        <input placeholder="Insert" type="text" class="form-control " />
    </div>
    <div class="submit-and-options">
        <select>
            <option value="">Option</option>
        </select>
        <button type="submit" class="btn btn-primary">Submit </button>
    </div>
</form>

CSS

form{position:relative;}
.tasksInput{margin-right:150px;}
.submit-and-options{position:absolute; right:0; top:0;}

Answer 2

If you want a most flexible and modern solution you can use Flexbox model of CSS3, I have updated your jsfiddle DEMO HERE

using:

.flexBox {
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
    align-items: center;
    width: 100%;
}
.droptown {
    -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1; /* OLD - Firefox 19- */
    -webkit-flex: 1; /* Chrome */
    -ms-flex: 1; /* IE 10 */
    flex: 1; /* NEW, */
    margin-right: 4px;
}
.flexChild {
    -webkit-box-flex: 2; /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 2; /* OLD - Firefox 19- */
    -webkit-flex: 2; /* Chrome */
    -ms-flex: 2; /* IE 10 */
    flex: 2; /* NEW, */
    margin-right: 4px;
}

Answer 3

Use this...

.tasksInput{
    display:inline;

}
.form-control
{
    display:inline;
width:100px;
}

hope it will help..