Question

以下是我写的表格的代码：

<div class="container-fluid" id="unlabelled">
            <p class="bg-primary">Items<span>Quantity</span><span>In Kit</span></p>
            <form>
                <div class="form-group col-lg-5">
                    <input type="text" class="form-control" id="unlabelled-items" placeholder="Enter code or description">
                </div>
                <div class="form-group col-md-2">
                    <input type="text" class="form-control" id="quantity" placeholder="Enter Quantity">
                </div>
                <div class="form-group">
                    <input type="checkbox"  id="in-kit">
                    <button class="btn-primary" id="add-btn">Add</button>
                </div>
            </form>
            </div>

我在这里使用bootstrap。我的顶部段标题为class =“bg-primary”，它为标题提供了很好的背景。我有两个文本输入字段，一个复选框和一个按钮。我想将上一段中的文字与这些字段对齐。

https://imgur.com/XinA1kT

我希望Items文本在第一个文本字段的中心对齐，Quantity包含第二个文本字段，In包含复选框。

正如您在我的代码中看到的，我在文本周围添加了span标记。我通过为这些span标记添加边距属性来实验它，但它无法正常工作。我尝试了一堆它没关系，但我至少需要15到20个甚至没有解决我的问题。

还有其他选择吗？我甚至可以为p标签尝试其他替代方案。

谢谢。

Answer 1

这至少可以让你开始，它只是rows和columns以及一些小CSS。您遇到的问题是在移动设备上，如果您希望它保持完全水平，它将开始崩溃。

＆＃13;

.well-md.well-head {
  background: #3973a6;
  border: none;
  color: #fff;
  font-size: 18px;
  height: 60px;
  text-align: center;
}
.checkbox {
  text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <form>
    <div class="row well well-md well-head">
      <div class="col-xs-4">
        <p>Items</p>
      </div>
      <div class="col-xs-3">
        <p>Quantity</p>
      </div>
      <div class="col-xs-3">
        <p>In Kit</p>
      </div>
    </div>
    <div class="row">
      <div class="form-group col-xs-4">
        <input type="text" class="form-control" id="unlabelled-items" name="unlabelled-items" placeholder="Enter code or description">
      </div>
      <div class="form-group col-xs-3">
        <input type="text" class="form-control" id="quantity" name="quantity" placeholder="Enter Quantity">
      </div>
      <div class="form-group">
        <div class="form-group col-xs-3">
          <div class="form-group">
            <div class="checkbox">
              <input type="checkbox" id="in-kit" name="in-kit">
            </div>
          </div>
        </div>
        <div class="form-group col-xs-2">
          <button class="btn btn-primary" id="add-btn">Add</button>
        </div>
      </div>
    </div>
  </form>
</div>

＆＃13;

如何在<p>标记中的单词之间添加间距，并将它们与下一个div中的文本框对齐

1 个答案: