html - CSS:当左拉和右拉不起作用时，将搜索按钮内联到输入

Question

我需要将搜索按钮放在搜索输入旁边，这是一个选项列表。

我搜索过，大多数答案都说我需要使用 pull-left 和 pull-right 类，但它对我的情况不起作用。

这是 Codepen:

https://codepen.io/ogonzales/pen/rNNVOBr

完整的页面代码:

https://codepen.io/ogonzales/pen/rNNVOBr

CodePen 使用 diplay:flex:

https://codepen.io/ogonzales/pen/ExxjVqa

原始 HTML:

<div class="row margin-top3 margin-bottom5 ">

        <form method="get" action="{% url 'shop:catalogo' %}">
            <div style="display: inline;">
            <div class="input-group pull-left">
                <div class="input-group-prepend">
                    <label class="input-group-text" for="inputGroupSelect01">Categorías</label>
                    <select class="custom-select" searchable="Search here.." value={{filtro}} name="filtro">
                        <option value="todas" disabled selected>Seleccionar categoría</option>
                        <option value="todas">Todas</option>
                        <option value="celulares">Celulares</option>
                        <option value="programacion">Programación</option>
                    </select>
                </div>
            </div>
            <div class="input-group-append pull-right">
                <p><input class="btn btn-outline-secondary" type="submit" name="buscar" value="Buscar" /></p>
            </div>
        </div>
            <!-- <p class="margin-top5">Ordenado por: <input class="disabled" type="text" value={{orderby}} name="orderby" /></p> -->
        </form>

</div>

更新:

高度增加:

Answer 1

您不需要使用向左拉或向右拉。你必须简单地把 <div class="input-group-append">里面<div class="input-group">正如它在 official documentation 中所说的那样.

<div class="row margin-top5 margin-bottom5 ">
    <form method="get" action="{% url 'shop:catalogo' %}">
        <div class="input-group">
            <div class="input-group-prepend">
                <label class="input-group-text" for="inputGroupSelect01">Categorías</label>
            </div>
            <select class="custom-select" searchable="Search here.." value={{filtro}} name="filtro">
                <option value="todas" disabled selected>Seleccionar categoría</option>
                <option value="todas">Todas</option>
                <option value="celulares">Celulares</option>
                <option value="programacion">Programación</option>
            </select>
            <div class="input-group-append">
                <input class="btn btn-outline-secondary mb-0" type="submit" name="buscar" value="Buscar" />
            </div>
        </div>
    </form>
</div>