html - 窗体中的右对齐按钮-6ren

html - 窗体中的右对齐按钮

转载作者：太空宇宙更新时间：2023-11-04 07:51:42

我在使用 float 时遇到了一些问题:对；在按钮上。

无论我做什么，按钮就是不想转到右边。这是第二个按钮，带有“高级搜索按钮”类的按钮。

我正在使用 Bootstrap 4。

HTML

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="box">
    <div class="box-title w-100">
        <h5>Opgaver</h5>
    </div>
    <div class="box-form w-100">
        <form action="" class="form-inline">
            <div class="form-group form-group-custom">
                <input type="text" class="form-control" placeholder="Rekvirent">
            </div>
            <div class="form-group form-group-custom">
                <input type="text" class="form-control" placeholder="Tildelt til">
            </div>
            <div class="form-group form-group-custom">
                <select name="select_Afsluttet" id="select_Afsluttet" class="custom-select mb-2 mr-sm-2 mb-sm-0">
                    <option selected hidden value="">Afsluttet</option>
                    <option value="">Ja</option>
                    <option value="">Nej</option>
                    <option value="">Alle</option>
                </select>
            </div>
            <div class="form-group form-group-custom">
                <select name="select_Godkendt" id="select_Godkendt" class="custom-select mb-2 mr-sm-2 mb-sm-0">
                    <option selected hidden value="">Godkendt</option>
                    <option value="">Ja</option>
                    <option value="">Nej</option>
                    <option value="">Alle</option>
                </select>
            </div>
            <div class="form-group form-group-custom float-sm-right">
                <button type="button" class="btn btn-success btn-sm" style="margin-right: 15px;">Søg</button>
                <button type="button" class="btn btn-primary btn-sm advanced-search-button" onclick="advancedSearch(this)">Avanceret søgning</button>
            </div>
        </form>
        <form action="" class="form-inline form-custom advanced-search">
            <div class="form-group form-group-custom">
                <select name="select_Prioritet" id="select_Prioritet" class="custom-select mb-2 mr-sm-2 mb-sm-0">
                    <option selected hidden value="">Prioritet</option>
                    <option value="">Lav</option>
                    <option value="">Middel</option>
                    <option value="">Høj</option>
                    <option value="">Straks</option>
                    <option value="">Driftfejl</option>
                </select>
            </div>
            <div class="form-group form-group-custom">
                <select name="select_Opgavestatus" id="select_Opgavestatus" class="custom-select mb-2 mr-sm-2 mb-sm-0">
                    <option selected hidden value="">Opgavestatus</option>
                    <option value="">Arkiveret</option>
                    <option value="">Sendt til DUC</option>
                    <option value="">Venter på bruger</option>
                    <option value="">Venter på kunde</option>
                    <option value="">Venter på AO</option>
                </select>
            </div>
            <div class="form-group form-group-custom">
                <select name="select_Opgavetype" id="select_Opgavetype" class="custom-select mb-2 mr-sm-2 mb-sm-0">
                    <option selected hidden value="">Opgavetype</option>
                    <option value="">Andet</option>
                    <option value="">Sendt til DUC</option>
                    <option value="">Venter på bruger</option>
                    <option value="">Venter på kunde</option>
                    <option value="">Venter på AO</option>
                </select>
            </div>
            <div class="form-group form-group-custom">
                <select name="select_Underkategori" id="select_Underkategori" class="custom-select mb-2 mr-sm-2 mb-sm-0">
                    <option selected hidden value="">Underkategori</option>
                    <option value="">Via telefon</option>
                    <option value="">Via email</option>
                    <option value="">Internet</option>
                    <option value="">Intranet</option>
                    <option value="">VMS</option>
                </select>
            </div>
            <div class="form-group form-group-custom">
                <input type="text" class="form-control" placeholder="Søg efter">
            </div>
        </form>
    </div>
    <div class="box-content">
        <table class="table table-hover table-sm">
            <thead>
                <tr>
                    <th scope="col">Dato</th>
                    <th scope="col">ID</th>
                    <th scope="col">Rekv</th>
                    <th scope="col">Tildelt</th>
                    <th scope="col">Beskrivelse</th>
                    <th scope="col">Type</th>
                    <th scope="col">Seneste log besked</th>
                    <th scope="col">Deadline</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>22-11-2017</td>
                    <td>70935</td>
                    <td>HJR</td>
                    <td>LUC</td>
                    <td>Docking Station...</td>
                    <td>Bestilling - Via Telefon</td>
                    <td>8 dage</td>
                    <td>22-11-2017</td>
                </tr>
                <tr>
                    <td>28-11-2017</td>
                    <td>71049</td>
                    <td>LLJ</td>
                    <td>LUC</td>
                    <td>Kan ikke scanne fra sin printe....</td>
                    <td>IT-Drift - Via Telefon</td>
                    <td>3 dage</td>
                    <td>28-11-2017</td>
                </tr>
                <tr>
                    <td>05-12-2017</td>
                    <td>71244</td>
                    <td>LYL</td>
                    <td>LUC</td>
                    <td>Printer med gul baggrund på hy....</td>
                    <td>IT-support - Via Telefon</td>
                    <td>1 dage</td>
                    <td>05-12-2017</td>
                </tr>
                <tr>
                    <td>05-12-2017</td>
                    <td>71244</td>
                    <td>LYL</td>
                    <td>LUC</td>
                    <td>Printer med gul baggrund på hy....</td>
                    <td>IT-support - Via Telefon</td>
                    <td>1 dage</td>
                    <td>05-12-2017</td>
                </tr>
                <tr>
                    <td>05-12-2017</td>
                    <td>71244</td>
                    <td>LYL</td>
                    <td>LUC</td>
                    <td>Printer med gul baggrund på hy....</td>
                    <td>IT-support - Via Telefon</td>
                    <td>1 dage</td>
                    <td>05-12-2017</td>
                </tr>
                <tr>
                    <td>05-12-2017</td>
                    <td>71244</td>
                    <td>LYL</td>
                    <td>LUC</td>
                    <td>Printer med gul baggrund på hy....</td>
                    <td>IT-support - Via Telefon</td>
                    <td>1 dage</td>
                    <td>05-12-2017</td>
                </tr>
                <tr>
                    <td>05-12-2017</td>
                    <td>71244</td>
                    <td>LYL</td>
                    <td>LUC</td>
                    <td>Printer med gul baggrund på hy....</td>
                    <td>IT-support - Via Telefon</td>
                    <td>1 dage</td>
                    <td>05-12-2017</td>
                </tr>
                <tr>
                    <td>05-12-2017</td>
                    <td>71244</td>
                    <td>LYL</td>
                    <td>LUC</td>
                    <td>Printer med gul baggrund på hy....</td>
                    <td>IT-support - Via Telefon</td>
                    <td>1 dage</td>
                    <td>05-12-2017</td>
                </tr>
                <tr>
                    <td>05-12-2017</td>
                    <td>71244</td>
                    <td>LYL</td>
                    <td>LUC</td>
                    <td>Printer med gul baggrund på hy....</td>
                    <td>IT-support - Via Telefon</td>
                    <td>1 dage</td>
                    <td>05-12-2017</td>
                </tr>
                <tr>
                    <td>05-12-2017</td>
                    <td>71244</td>
                    <td>LYL</td>
                    <td>LUC</td>
                    <td>Printer med gul baggrund på hy....</td>
                    <td>IT-support - Via Telefon</td>
                    <td>1 dage</td>
                    <td>05-12-2017</td>
                </tr>
                <tr>
                    <td>05-12-2017</td>
                    <td>71244</td>
                    <td>LYL</td>
                    <td>LUC</td>
                    <td>Printer med gul baggrund på hy....</td>
                    <td>IT-support - Via Telefon</td>
                    <td>1 dage</td>
                    <td>05-12-2017</td>
                </tr>
                <tr>
                    <td>05-12-2017</td>
                    <td>71244</td>
                    <td>LYL</td>
                    <td>LUC</td>
                    <td>Printer med gul baggrund på hy....</td>
                    <td>IT-support - Via Telefon</td>
                    <td>1 dage</td>
                    <td>05-12-2017</td>
                </tr>
                <tr>
                    <td>05-12-2017</td>
                    <td>71244</td>
                    <td>LYL</td>
                    <td>LUC</td>
                    <td>Printer med gul baggrund på hy....</td>
                    <td>IT-support - Via Telefon</td>
                    <td>1 dage</td>
                    <td>05-12-2017</td>
                </tr>
                <tr>
                    <td>05-12-2017</td>
                    <td>71244</td>
                    <td>LYL</td>
                    <td>LUC</td>
                    <td>Printer med gul baggrund på hy....</td>
                    <td>IT-support - Via Telefon</td>
                    <td>1 dage</td>
                    <td>05-12-2017</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

我希望你能帮助我:)

这部分我没有任何自定义 CSS，我只使用 JS 的类。

最佳答案

你可以用 Flexbox 做这样的事情:

.flex-container {display:flex} /* displays children inline by default */

.flex-item {
 display: flex;
 justify-content: space-between; /* horizontal alignment / creates the max. horizontal space between the buttons */
 flex: 1 !important; /* takes all the remaining horizontal space / needs to have the !important keyword otherwise it doesn't work */
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

<div class="box">
            <div class="box-title w-100">
                <h5>Opgaver</h5>
            </div>
            <div class="box-form w-100">
                <form action="" class="form-inline flex-container">
                    <div class="form-group form-group-custom">
                        <input type="text" class="form-control" placeholder="Rekvirent">
                    </div>
                    <div class="form-group form-group-custom">
                        <input type="text" class="form-control" placeholder="Tildelt til">
                    </div>
                    <div class="form-group form-group-custom">
                        <select name="select_Afsluttet" id="select_Afsluttet" class="custom-select mb-2 mr-sm-2 mb-sm-0">
                            <option selected hidden value="">Afsluttet</option>
                            <option value="">Ja</option>
                            <option value="">Nej</option>
                            <option value="">Alle</option>
                        </select>
                    </div>
                    <div class="form-group form-group-custom">
                        <select name="select_Godkendt" id="select_Godkendt" class="custom-select mb-2 mr-sm-2 mb-sm-0">
                            <option selected hidden value="">Godkendt</option>
                            <option value="">Ja</option>
                            <option value="">Nej</option>
                            <option value="">Alle</option>
                        </select>
                    </div>
                    <div class="form-group form-group-custom flex-item">
                        <button type="button" class="btn btn-success btn-sm" style="margin-right: 15px;">Søg</button>
                        <button type="button" class="btn btn-primary btn-sm advanced-search-button" onclick="advancedSearch(this)">Avanceret søgning</button>
                    </div>
                </form>

                <form action="" class="form-inline form-custom advanced-search">
                    <div class="form-group form-group-custom">
                        <select name="select_Prioritet" id="select_Prioritet" class="custom-select mb-2 mr-sm-2 mb-sm-0">
                            <option selected hidden value="">Prioritet</option>
                            <option value="">Lav</option>
                            <option value="">Middel</option>
                            <option value="">Høj</option>
                            <option value="">Straks</option>
                            <option value="">Driftfejl</option>
                        </select>
                    </div>
                    <div class="form-group form-group-custom">
                        <select name="select_Opgavestatus" id="select_Opgavestatus" class="custom-select mb-2 mr-sm-2 mb-sm-0">
                            <option selected hidden value="">Opgavestatus</option>
                            <option value="">Arkiveret</option>
                            <option value="">Sendt til DUC</option>
                            <option value="">Venter på bruger</option>
                            <option value="">Venter på kunde</option>
                            <option value="">Venter på AO</option>
                        </select>
                    </div>
                    <div class="form-group form-group-custom">
                        <select name="select_Opgavetype" id="select_Opgavetype" class="custom-select mb-2 mr-sm-2 mb-sm-0">
                            <option selected hidden value="">Opgavetype</option>
                            <option value="">Andet</option>
                            <option value="">Sendt til DUC</option>
                            <option value="">Venter på bruger</option>
                            <option value="">Venter på kunde</option>
                            <option value="">Venter på AO</option>
                        </select>
                    </div>
                    <div class="form-group form-group-custom">
                        <select name="select_Underkategori" id="select_Underkategori" class="custom-select mb-2 mr-sm-2 mb-sm-0">
                            <option selected hidden value="">Underkategori</option>
                            <option value="">Via telefon</option>
                            <option value="">Via email</option>
                            <option value="">Internet</option>
                            <option value="">Intranet</option>
                            <option value="">VMS</option>
                        </select>
                    </div>
                    <div class="form-group form-group-custom">
                        <input type="text" class="form-control" placeholder="Søg efter">
                    </div>
                </form>
            </div>

            <div class="box-content">
                <table class="table table-hover table-sm">
                    <thead>
                    <tr>
                        <th scope="col">Dato</th>
                        <th scope="col">ID</th>
                        <th scope="col">Rekv</th>
                        <th scope="col">Tildelt</th>
                        <th scope="col">Beskrivelse</th>
                        <th scope="col">Type</th>
                        <th scope="col">Seneste log besked</th>
                        <th scope="col">Deadline</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>22-11-2017</td>
                        <td>70935</td>
                        <td>HJR</td>
                        <td>LUC</td>
                        <td>Docking Station...</td>
                        <td>Bestilling - Via Telefon</td>
                        <td>8 dage</td>
                        <td>22-11-2017</td>
                    </tr>
                    <tr>
                        <td>28-11-2017</td>
                        <td>71049</td>
                        <td>LLJ</td>
                        <td>LUC</td>
                        <td>Kan ikke scanne fra sin printe....</td>
                        <td>IT-Drift - Via Telefon</td>
                        <td>3 dage</td>
                        <td>28-11-2017</td>
                    </tr>
                    <tr>
                        <td>05-12-2017</td>
                        <td>71244</td>
                        <td>LYL</td>
                        <td>LUC</td>
                        <td>Printer med gul baggrund på hy....</td>
                        <td>IT-support - Via Telefon</td>
                        <td>1 dage</td>
                        <td>05-12-2017</td>
                    </tr>
                    <tr>
                        <td>05-12-2017</td>
                        <td>71244</td>
                        <td>LYL</td>
                        <td>LUC</td>
                        <td>Printer med gul baggrund på hy....</td>
                        <td>IT-support - Via Telefon</td>
                        <td>1 dage</td>
                        <td>05-12-2017</td>
                    </tr>
                    <tr>
                        <td>05-12-2017</td>
                        <td>71244</td>
                        <td>LYL</td>
                        <td>LUC</td>
                        <td>Printer med gul baggrund på hy....</td>
                        <td>IT-support - Via Telefon</td>
                        <td>1 dage</td>
                        <td>05-12-2017</td>
                    </tr>
                    <tr>
                        <td>05-12-2017</td>
                        <td>71244</td>
                        <td>LYL</td>
                        <td>LUC</td>
                        <td>Printer med gul baggrund på hy....</td>
                        <td>IT-support - Via Telefon</td>
                        <td>1 dage</td>
                        <td>05-12-2017</td>
                    </tr>
                    <tr>
                        <td>05-12-2017</td>
                        <td>71244</td>
                        <td>LYL</td>
                        <td>LUC</td>
                        <td>Printer med gul baggrund på hy....</td>
                        <td>IT-support - Via Telefon</td>
                        <td>1 dage</td>
                        <td>05-12-2017</td>
                    </tr>
                    <tr>
                        <td>05-12-2017</td>
                        <td>71244</td>
                        <td>LYL</td>
                        <td>LUC</td>
                        <td>Printer med gul baggrund på hy....</td>
                        <td>IT-support - Via Telefon</td>
                        <td>1 dage</td>
                        <td>05-12-2017</td>
                    </tr>
                    <tr>
                        <td>05-12-2017</td>
                        <td>71244</td>
                        <td>LYL</td>
                        <td>LUC</td>
                        <td>Printer med gul baggrund på hy....</td>
                        <td>IT-support - Via Telefon</td>
                        <td>1 dage</td>
                        <td>05-12-2017</td>
                    </tr>
                    <tr>
                        <td>05-12-2017</td>
                        <td>71244</td>
                        <td>LYL</td>
                        <td>LUC</td>
                        <td>Printer med gul baggrund på hy....</td>
                        <td>IT-support - Via Telefon</td>
                        <td>1 dage</td>
                        <td>05-12-2017</td>
                    </tr>
                    <tr>
                        <td>05-12-2017</td>
                        <td>71244</td>
                        <td>LYL</td>
                        <td>LUC</td>
                        <td>Printer med gul baggrund på hy....</td>
                        <td>IT-support - Via Telefon</td>
                        <td>1 dage</td>
                        <td>05-12-2017</td>
                    </tr>
                    <tr>
                        <td>05-12-2017</td>
                        <td>71244</td>
                        <td>LYL</td>
                        <td>LUC</td>
                        <td>Printer med gul baggrund på hy....</td>
                        <td>IT-support - Via Telefon</td>
                        <td>1 dage</td>
                        <td>05-12-2017</td>
                    </tr>
                    <tr>
                        <td>05-12-2017</td>
                        <td>71244</td>
                        <td>LYL</td>
                        <td>LUC</td>
                        <td>Printer med gul baggrund på hy....</td>
                        <td>IT-support - Via Telefon</td>
                        <td>1 dage</td>
                        <td>05-12-2017</td>
                    </tr>
                    <tr>
                        <td>05-12-2017</td>
                        <td>71244</td>
                        <td>LYL</td>
                        <td>LUC</td>
                        <td>Printer med gul baggrund på hy....</td>
                        <td>IT-support - Via Telefon</td>
                        <td>1 dage</td>
                        <td>05-12-2017</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>

我通过添加两个额外的类(.flex-container 和 .flex-item)并应用某些flex 具有适当值的属性。

我将 .flex-container 类应用于 form 元素，它是所有 .form-group/ 的父元素>.form-group-custom div 和 .flex-item 类到 button 的父级。

关于html - 窗体中的右对齐按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47713973/

文章推荐： html - flex 垫片自动增长

文章推荐： c - 使用递归的成对差异

文章推荐： C - 打印一个充满 Unicode 符号的数组

文章推荐： CSS。不起作用文本溢出 : ellipsis

assembly - 打印存储在字节中的值的宏。 assembly 体
程序集，masm 嘿，我写了宏来打印存储在 dane1 段中的 1 字节值。我将值除以 16，然后将提醒推送到堆栈，直到值==0。然后我弹出提醒将它们转换为 ASCII 码，并打印它们。有人可以看
java - SOAP 体，命名空间问题
我在 Apache Geronimo 2.1.3 上有一个 Web 服务应用程序。我正在使用 JAX-WS，使用 SOAP 1.1 注释 POJOS。 (使用 Sun JDK 1.5) 各种客户端都
java - 同步代码块是只阻塞赋值还是阻塞整个 block 体？
我有一个数据变量，monthArray，它被多个消费者读取，并由单个定期更新程序线程定期更新数据。全部异步。我已经考虑了这两个选项来安全地执行更新。 ArrayList tempArray
r - 用系统点栅格填充 3D 体
我有一组 3D 体。每个 Body 由 8 个点定义，每个点具有三个坐标。所有的物体都是立方体的或近似立方体的。我想用系统的点栅格“填充”立方体。坐标存储在简单的 data.frames 中。我开发
java - 修改 HttpServletRequest 体
我正在处理遗留代码，需要打补丁。问题:一个古老的应用程序发送错误的 HTTP POST 请求。其中一个参数未经过 URL 编码。我知道这个参数总是排在最后而且我知道它的名字。我现在正尝试在运行在 t
iphone - 我想在检测到触摸点时移动 Sprite 体
我想在触摸屏幕时移动 sprite body ，但它不能发生...... -(void)ccTouchEnded:(UITouch *)touch withEvent:(UIEvent *)event
c - 如何初始化 union 体？
这个问题在这里已经有了答案: Can a union be initialized in the declaration? (3 个答案) 关闭 7 年前。如果它是一个struct那么它就可以完成
c++ - siginfo 匿名 union 体
我正在尝试获取生成 sigsys 信号的系统调用的地址!但我从 gcc 收到以下错误: gcc emulator.c -fms-extensions error: ‘siginfo_t’ has no
php - Guzzle 返回流空体而不是 json 体
当我使用 Postman 进行 API 调用时，我收到一个 JSON 对象..这是我所期望的。但是，当我像这样与 Guzzle 进行相同的调用时: $client = new \GuzzleHttp
c# - 表达式体 VS block 体
在编码时，出现了差异。通常在编写简单的方法或构造函数时，我经常使用表达式体技术。但是，当我产生以下内容时: public class Sample : ISample { private r
android - LibGDX Touch Box2D 体
我正在使用 LibGDX 创建一个新项目。我想做的是，我将 tmx 文件中的主体加载到工作正常的关卡中。尸体也有一个 Sprite 。问题是，我想让用户触摸场景中的某些 body 。当他们触摸 b
c - 循环遍历 C 结构体(不带 union 体)
我的意图:在不使用 union 的情况下循环遍历一个结构的 30 个成员，所有成员都是字符数组类型，每个成员都存储对 itoa 的调用结果。在下面的代码中，我将结构体成员命名为a-z、A-D。在调用函
java - 如何在 Java 中创建 C 风格的 union 体？
我必须将我的代码段之一从 C 转换为 java。代码如下。 union commandString{ char commndStr[20]; struct{ char
c++ - 由 float : completely insane output 组成的 union 体
#include union NumericType { float value; int intvalue; }Values; int main() { Values.va
kotlin - 错误:(15，1)Kotlin:具有 block 体 'return'的函数中需要的('{…}'表达式)
我在此代码中收到错误: fun num(num:Int):Int { if (num > 0){ print(num % 10) return num / 10

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 窗体中的右对齐按钮