Question

我该怎么做才能将label和input 元素放在同一个行上？任何人都可以帮我这个吗？

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

<div class="container">
  <div class="row">
    <div class="control-group" id="fields">
      <label class="control-label" for="field1">Nice Multiple Form Fields</label>
      <div class="controls"> 
        <form role="form" autocomplete="off">
          <div class="entry input-group col-xs-3">
            <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>

Answer 1

标记的for属性应该等于相关元素的id属性以将它们绑定在一起，但是你的输入div中没有id ..

尝试添加：

<input class="form-control" id="field1" name="fields[]" type="text" placeholder="Type something" />

Answer 2

只需将label放在input 元素上方，因为默认情况下它们都是内嵌元素：

＆＃13;

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

＆＃13;

<div class="container">
  <div class="row">
    <div class="control-group" id="fields">
      <div class="controls"> 
        <form role="form" autocomplete="off">
          <div class="entry input-group col-xs-3">
            <label class="control-label" for="field1">Nice Multiple Form Fields</label>
            <input class="form-control" name="fields[]" type="text" 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>

＆＃13;

标签和输入元素不在同一行

2 个答案: