使用Bootstrap将输入框和标签显示在同一行

Question

我想在同一行上显示标签和输入框：

我尝试使用CSS：

form  label {
    display:block;
    float:left;

}

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

- user2706463

---

你的“提交查询”按钮看起来很不错！ - Nicole Stutz

Answer 1

这里是它

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

UPDATED FIDDLE

- RbG

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>

代码片段

- Paulo Fidalgo

---

@ismailsunni 你确定吗？在 Firefox 37 中它对我有效。 - Paulo Fidalgo

抱歉。我再次检查后发现，我需要调整“fiddle”中的“结果窗口”的大小才能使它正常工作。下面是两种情况的截图。 非内联：http://i.imgur.com/PQaHOaE.png 内联：http://i.imgur.com/9yxje01.png 我的浏览器是Chrome 41。我想现在取消对你的回答的反对票，但我不能。 - ismailsunni

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

- Nicole Stutz

Answer 4

移除给 input 标签添加的 input-block-level 类

- Girish Thimmegowda