设置水平表单和追加按钮

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

来源

2012-08-10 gilbertbw

也许创建HTTP表单的演示：// fiddle.jshell.net张贴您的表单代码和您的css代码。 – 2012-08-10 22:11:03

我们需要知道您的CSS代码。 – danijar 2012-08-10 22:22:57

@sharethis这只是默认的twitter引导，没有自定义的CSS，我把完整的引导CSS在jsfiddle – gilbertbw 2012-08-10 22:37:36

你选择呢？ enter image description here

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

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

我想我已经更新了你的小提琴... RIGHT HERE.

来源

2012-08-13 15:54:10

谢谢，我没有意识到输入和按钮必须在同一行 – gilbertbw 2012-08-14 14:39:32

很高兴帮助你。 – 2012-08-14 15:58:26

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

.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/

来源

2012-08-10 22:46:26 danijar

设置水平表单和追加按钮

回答

相关问题