表单中的右对齐按钮答案

【问题标题】：Right align button in form表单中的右对齐按钮
【发布时间】：2026-02-07 01:40:01
【问题描述】：

我在使用浮点数时遇到了一些问题：对；在一个按钮上。

无论我做什么，按钮都不想向右移动。这是第二个按钮，具有“高级搜索按钮”类的按钮。

我正在使用 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 的类。

【问题讨论】：

将类添加到您的按钮标签float-right
@Ylama 我已经这样做了，为了方便在这里显示，我只是在 HTMl 中将它作为“style="float: right;"
以为你不想只使用自定义 css classes。
@Ylama 不，我现在没有，所以人们不会对为什么帖子上没有 CSS 感到困惑。
那么对于 form-group 类，将其样式设置为 inline-block ，并在 .btn-success 上添加 float: left ，在 btn-primary 上添加 float: right;

标签： html css alignment bootstrap-4

【解决方案1】：

你可以用 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 类应用于buttons 的父元素。

【讨论】：

这个半有效，它把表格中的其他所有东西都弄乱了。这是一个内联行，所以所有内容都在同一行，通过添加 100% 宽度，它会使内联不起作用。
这次我已经添加了所有的 HTML :)

【解决方案2】：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">


<div class="box-form w-100">
<form action="" class="">
    <div class="form-group col-sm-9 d-inline-block form-group-custom float-left">
        <button type="button" class="btn btn-success float-left  btn-sm" style="margin-right: 15px;">Søg</button>
        <button type="button" class="btn btn-primary float-right  btn-sm advanced-search-button" onclick="advancedSearch(this)">Avanceret søgning</button>
    </div>
</form>
</div>

删除了form-inline 类表单，并为表单中的第一个div 添加了w-100。

【讨论】：

这也不起作用。如果您想尝试一下，我已经用所有 HTML 代码更新了帖子。
看看我的更新我添加到新类w-100 d-inline-block form-inline这意味着你不需要删除form-inline
更新了请看。
我在您的代码 sn-p 中进行了尝试，但它没有创建新行..您确定您实施正确吗？
创建一个新的 sn-p，使用 30 分钟前我在那里发布的新 html，您会看到它创建了一个新行。

【解决方案3】：

U 也可以使用 top n left 的 CSS 属性。以像素为单位设置值。并且按钮应该有一个绝对的位置属性值。它对我有用。

【讨论】：

你能举个例子吗？
.leftButton{ 位置：绝对；字体大小：20px；最高：4.3%；左：86%；高度：30px；宽度：14%；}。 Leftbutton 是按钮的类名
不会添加位置：绝对；删除网站的响应式布局？尤其是当你说前 4.3% 和剩下 86% 时
U 可以将百分比值更改为像素，因此按钮位置不会随着屏幕尺寸的变化而变化。
是的，这只是弄乱了整个按钮。