html - 设置水平表单和附加按钮

Question

我有一个表格： http: //fiddle.jshell.net/eJ2kS/ 我想在一行上输入标签和文本，并将按钮附加到文本输入，但文档对附加按钮有点含糊： http://twitter.github.com/bootstrap/base-css.html#forms

Answer 1

您必须像下面这样覆盖样式。请注意，这不是关于使用您的框架的解决方案。

.control-group, .btn, .control-group label, .controls{ float:left !important; }
.controls{ margin:0 1em !important; }
.control-group{ margin:0 !important; }
label{ margin:5px !important; }

我希望这是你想要的。它将所有需要的元素浮动到左侧并更正一些边距。就这样。这!important是强制覆盖框架中的旧值。

这是您更新的小提琴： http: //fiddle.jshell.net/eJ2kS/5/

Answer 2

你选择这个吗？

如果是这样，那么代码应...

<form id="signup" method="post" action="/signup" class="form-horizontal">
                    <legend>Sign Up</legend>

                    <div class="control-group">
                        <label for="appendedInputButton" class="control-label">User Name</label>
                        <div class="controls">
                          <div class="input-append">
                            <input type="text" size="16" id="appendedInputButton" class="span2"><button type="button" class="btn">Check Availabilty</button>
                          </div>
                        </div>
                     </div>
                </fieldset>
            </form>

我想我已经更新了你的小提琴......就在这里。