具有两个文本输入和一个按钮的输入组

Question

我现在有一个输入文本和旁边的按钮：

<form id="chat-form">
    <div class="input-group">
        <input name="message" id="message" type="text" class="form-control">
        <span class="input-group-btn">
            <button class="btn btn-default" type="submit">send</button>
        </span>
    </div><!-- /input-group -->
</form>

http://jsfiddle.net/3mgycoop/

我想要在旁边有两个输入和按钮。全部在一行中，如下所示：

[         product        ][    price    ][ send-btn]

它应该是 100% 宽，就像我现在一样。

如何实现？

Answer 1

向您的元素添加一些 ids 并添加以下内容 css:

#message{
    float:left;
    width:45%;
}
#message2{
    float:left;
    width:45%;
}
body {
    margin: 10px;
}

这里是 fiddle:http://jsfiddle.net/3mgycoop/2/