Question

您好我有以下代码：

    <div class="panel panel-primary fixed-panel">
    <div class="panel-heading">Test</div>
    <div class="panel-body">
        <div class="col-xs-4">
            <form name="myForm">
                <label for="startInput">Start:</label><br />
                <input type="text" id="startInput" class="form-control" name="start">

                <label for="endInput">End:</label><br />
                <input type="text" id="endInput" class="form-control" name="end">
            </form>
        </div>
      </div>
  </div>

怎么可能，我得到同一行的输入？我希望标签仍然在输入之上。

Answer 1

我看到你使用bootstrap，所以只需将类form-inline添加到表单标签中，然后将标签和输入标签包装到div.form-group

更多相关信息：http://getbootstrap.com/css/#forms-inline

或者像这样：http://jsfiddle.net/Stafox/5manb2at/

Answer 2

使用.form-inline表单作为documentation

中所述的引导程序

在这里粘贴小提琴fiddle

这是新的dom。

<div class="panel panel-primary fixed-panel">
  <div class="panel-heading">Test</div>
    <div class="panel-body">

        <form name="myForm" class="form-inline">
            <div class="form-group">
              <label for="startInput">Start:</label>
              <input type="text" id="startInput" class="form-control"  name="start">
             </div>
                <div class="form-group">

                  <label for="endInput">End:</label>
                  <input type="text" id="endInput" class="form-control" name="end">
                </div>
        </form>
      </div>
  </div>

如何在css的同一行输入？

2 个答案: