如何实现label与input元素在同一行显示？寻求技术帮助

嘿，我来帮你搞定这个问题！看起来你用的是Bootstrap框架，默认情况下.control-label是块级元素，所以会独占一行，和下面的输入框分开。咱们可以用两种方式调整，最推荐的是利用Bootstrap自带的网格系统，这是最贴合框架设计的做法：

方法一：使用Bootstrap网格布局（推荐） #

我们给label和输入框的容器分别添加网格列类，让它们处于同一行的网格中：

修改后的CSS（可选添加垂直对齐样式） #

.entry:not(:first-of-type) { margin-top: 10px; }
.glyphicon { font-size: 12px; }

/* 可选：让label和输入框垂直居中对齐 */
.control-label {
  display: flex;
  align-items: center;
}

修改后的HTML代码（标注了关键改动） #

<div class="container">
 <div class="row">
 <div class="control-group" id="fields">
 <!-- 给label添加col-xs-2类，可根据需求调整列宽，比如col-sm-3 -->
 <label class="control-label col-xs-2" for="field1">Nice Multiple Form Fields</label>
 <!-- 给controls容器添加col-xs-10，和label的列数总和为12 -->
 <div class="controls col-xs-10">
 <form role="form" autocomplete="off">
 <!-- 去掉entry上的col-xs-3，让输入框自适应父容器宽度，如需固定宽度可保留并调整 -->
 <div class="entry input-group">
 <input class="form-control" name="fields[]" placeholder="Type something">
 <span class="input-group-btn">
 <button class="btn btn-success btn-add" type="button">
 <span class="glyphicon glyphicon-plus"></span>
 </button>
 </span>
 </div>
 </form>
 </div>
 </div>
 </div>
 </div>

改动说明：

• 给label添加col-xs-2（可以换成col-sm-*/col-md-*适配不同屏幕尺寸），给controls容器添加col-xs-10，两者列数总和为12，符合Bootstrap网格规则，自然会排在同一行。
• 移除了.entry上的col-xs-3，避免输入框过窄；如果需要固定宽度，可保留这个类并调整label的列数（比如label用col-xs-3，entry用col-xs-9）。
• 可选的CSS样式让label文字和输入框垂直居中，提升视觉一致性。

方法二：纯CSS调整（不依赖网格） #

如果你不想用网格，也可以直接修改元素的显示类型，强制它们在同一行：

.entry:not(:first-of-type) { margin-top: 10px; }
.glyphicon { font-size: 12px; }

/* 强制label为行内块元素 */
.control-label {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px; /* 给label和输入框之间加些间距 */
}

/* 让输入框容器也变为行内块，避免独占一行 */
.entry.input-group {
  display: inline-block;
  width: 250px; /* 设置合适的宽度 */
}

这种方法更灵活，但不如网格布局适配性好，适合不需要响应式的场景。

内容的提问来源于stack exchange，提问作者ganesh kaspate