Html 如何在

标记中的单词之间添加间距，并将它们与下一个div中的文本框对齐 以下是我编写的表单的代码：

<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>

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

我希望项目文本与第一个文本字段居中对齐，数量与第二个文本字段对齐，并且在套件中与复选框对齐

正如您在我的代码中看到的，我在文本周围添加了span标记。我尝试将边距属性添加到这些span标记中，但效果并不理想。我尝试了很多，但我至少需要15到20个，甚至没有解决我的问题

有没有别的办法？我甚至可以尝试其他p标签的替代品

---

谢谢。

您需要将文本描述符放入与您输入的列相匹配的列中。像这样：

<div class="container-fluid" id="unlabelled">
<p class="bg-primary">
            <div class="row">
           <div class="form-group col-md-5"> Items</div>
            <div class="form-group col-md-2">Quantity</div>
            <div class="form-group col-md-2">In Kit</div>
</div>
</p>
        <form>
            <div class="form-group col-md-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">
                <div class="form-group col-md-2">
                <input type="checkbox"  id="in-kit">
                    </div>
                     <div class="form-group col-md-2">
                <button class="btn-primary" id="add-btn">Add</button>
                    </div>
            </div>
        </form>
        </div>

---

这至少可以让你开始，它只是行和列以及一些次要的CSS。你会遇到的问题是在移动设备上，如果你想让它保持完全水平，它就会开始崩溃

.well-md.well-head{ 背景：3973a6； 边界：无； 颜色：fff； 字号：18px； 高度：60px； 文本对齐：居中； } .复选框{ 文本对齐：居中； } 项目

数量

套装

添加

---

这并不清楚你想要完成什么。你说的是文字，但我不确定这是什么