html - 如何在html中排列标签和输入

Question

我正在尝试水平排列输入和标签。

我试过:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

           <div class="row">
                <div class="span2">
                    <h2>Label1:</h2>
                </div>
                <div class="span2">
                    <input id="Filter_1" />
                </div>
                <div class="span1">
                    <h2>Label2:</h2>
                </div>
                <div class="span1">
                    <input id="Filter_2" />
                </div>
                <div class="span2">
                    <h2>Label3:</h2>
                </div>
                <div class="span2">
                    <input id="Filter_3" />
                </div>
                <div class="span1">
                    <input id="Button1" type="button" class="btn btn-large" value="Button 1" />
                </div>
            </div>

但是结果很糟糕，所有这些都在屏幕左侧，而右侧完全空白:

Answer 1

如果你使用 Bootstrap ，你可以使用这个布局。

运行代码并以全页模式打开它。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-xs-6 col-md-4 col-lg-3">
      <label>Label1:</label>
      <input id="Filter_1" />
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
      <label>Label2:</label>
      <input id="Filter_2" />
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
      <label>Label3:</label>
      <input id="Filter_3" />
    </div>
    <div class="form-btn">
      <input id="Button1" type="button" class="btn btn-primary btn-large" value="Button 1" />
    </div>
  </div>
</div>

您还可以在 forms-horizontal in bootstrap 中找到更多指导和示例