使用Bootstrap显示输入并标记相同的行

Question

我想在同一行显示，标注和输入：

我在CSS中尝试过：

form  label {
    display:block;
    float:left;

}

http://jsfiddle.net/kY5LL/18/

Answer 1

这里是

.span6{
overflow:hidden;
 display:inline;
}
.span6 label, .span6 input {
display:inline-block;
}
.span6 input {
width:70%;
margin-left:3%;
}

<强> UPDATED FIDDLE

Answer 2

如果您使用的是Bootstrap 3.x：

<form class="form-horizontal" role="form">
    <div class="form-group">
        <label for="inputType" class="col-sm-2 control-label">Label</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" id="inputCity" placeholder="Input text">
        </div>
    </div>
</form>

Fiddle

Answer 3

我在我的剧本中这样做了。我创建了一个div容器盒，在容器内部，一个标签留给了一个输入元素。

。 的 HTML

<div class="container">
    <label>Firstname</label>
    <input type="text">
</div>

<强> CSS

div.container{
  overflow:hidden;
}
label{
    width:70px;
    display:block;
    float:left;
    text-align:left;
}
input{
  width:240px;
  float:left;
}

Answer 4

删除授予input-block-level代码

的课程input