Html 所有值应与网页中的一行对齐

我正在设计一个web应用程序，它有一个标签、文本框和按钮。所有三个应该在一行中对齐，但都将进入新的一行

这是我的密码：

<div class="form-group row">
    <label class="col-md-4 col-form-label text-md-right" for="lists">lists:</label>
    <div class="col-md-8">
        <input class="form-control" type="text" id="lists" required>

    </div>
</div>

<div class="col-md-6 offset-md-4 top-space-30">
    <button type="submit" id="submit">Submit</button>
</div>

清单：
提交

我还尝试了另一种创建表的方法

<div class="row-fluid top-space-20">
                <table class="table">
                    <thead>
                        <th>label</th>
                        <th>textbox</th>
                        <th>button</th>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <label class="col-md-4 col-form-label text-md-right" for="list">list:</label>
                                <input class="form-control" type="text" id="list" required>
                                <button type="submit" id="submit">Submit</button>

                            </td>
                        </tr>

                    </tbody>
                </table>
                </div>

标签
文本框
按钮
名单：
提交

我想如果所有字段都在一行中，我可以在某种程度上隐藏页面的标题和表格。那没用

如果您看到标签，文本框和按钮将出现在每一行中。我试着使用同样不好用的桌子

我期望的输出是所有内容都应在一行中对齐

<form class="form-inline">
 <div class="form-group mx-sm-3 mb-2">
   <label for="lists">lists:</label>
   <input class="form-control" type="text" id="lists" required>
 </div>
 <button type="submit" id="submit" class="btn btn-primary mb-2">Submit</button>
</form>

清单：
提交

您可以尝试此代码。使用输入组代替表单组，它将为您工作

  <div class="input-group">
    <label class="col-md-3 col-form-label text-md-right" for="lists">lists:</label>
    <div class="col-md-7">
        <input class="form-control" type="text" id="lists" required>
    </div>
    <div class="col-md-2">
        <button type="submit" id="submit">Submit</button>
    </div>
</div>

清单：
提交