Question

我有3个元素 - 输入字段，dropmenu和一个按钮。经过几个小时的尝试，我仍然无法将它们排成一排并做出响应。我使用浮动但是当我调整窗口大小时它似乎打破了。

<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

我将输入包装边距放在左侧，用于选择和提交按钮。并将包装器添加到按钮+选择+相对于表单的绝对位置。

<强> 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

如果你想要一个最灵活和最现代的解决方案，你可以使用CSS3的Flexbox模型，我已经更新了你的jsfiddle DEMO HERE

使用：

.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

使用此...

.tasksInput{
    display:inline;

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

希望它会有所帮助..

制作输入字段和响应

3 个答案: