Question

我是后端开发人员，请原谅您可能找到的弱代码，

这就是我的表单的样子：

these two buttons are not correctly aligned in Chrome

我只在Chrome，FireFox＆amp; Edge按预期工作，见下图

How i want the form to look like ( shot from FF )

表格代码：

<div style="margin-top: 20px;margin-left: 100px;">
        <div class="card card-outlined style-primary-dark" style="width: 80%">
            <div class="card-head">
                <header><i class="fa fa-fw fa-lock"></i> QR Code</header>
            </div><!--end .card-head -->
            <div class="card-body">

                <form class="form-horizontal" role="form">

                    <div class="form-group">
                        <label for="txtData" style="color:#0d998f;" class="col-sm-2 control-label">Texte à Crypté</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="txtData" placeholder="Saisir vos données...." required>
                        </div><br><br><br>
                        <div class="col-sm-10 navigator">
                            <button id="btGenerer" type="button" class="btn ink-reaction btn-primary">Générer</button>
                            <button id="btSaveQR" type="button" class="btn ink-reaction btn-default-dark">Sauvegarder</button>
                        </div>

                    </div>

                </form>
            </div><!--end .card-body -->
        </div><!--end .card -->
    </div><!--end .col -->

一些CSS仅用于FF＆amp;边缘

@-moz-document url-prefix()
    {
        .navigator {
            margin-left:37%;
        }
    }

    @supports (-ms-ime-align: auto) {
        .navigator {
            margin-left:37%;
        }
    }

在Chrome上检查页面时，（Générer）按钮似乎需要占用大量空间，这可能是造成畸形的原因，请参见下图

Générer Button

Sauvegarder Button

Answer 1

只需删除特定于浏览器的CSS并添加以下CSS：

.navigator{
  text-align: center;
}
.navigator button{
  display: inline-block;
  padding: 8px 15px;
  border: 0;
  box-shadow: none;
  outline: none;
  background: #20252b;
  color: #fff;
  cursor: pointer;
}
button#btGenerer{
  background: #0aa89e;
}

<div style="margin-top: 20px;margin-left: 100px;">
        <div class="card card-outlined style-primary-dark" style="width: 80%">
            <div class="card-head">
                <header><i class="fa fa-fw fa-lock"></i> QR Code</header>
            </div><!--end .card-head -->
            <div class="card-body">

                <form class="form-horizontal" role="form">

                    <div class="form-group">
                        <label for="txtData" style="color:#0d998f;" class="col-sm-2 control-label">Texte à Crypté</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="txtData" placeholder="Saisir vos données...." required>
                        </div><br><br><br>
                        <div class="col-sm-10 navigator">
                            <button id="btGenerer" type="button" class="btn ink-reaction btn-primary">Générer</button>
                            <button id="btSaveQR" type="button" class="btn ink-reaction btn-default-dark">Sauvegarder</button>
                        </div>

                    </div>

                </form>
            </div><!--end .card-body -->
        </div><!--end .card -->
    </div><!--end .col -->

你也可以查看这个小提琴https://jsfiddle.net/sy89qh73/

Answer 2

尝试使用flexbox对齐它们。这将有助于垂直和水平。

.navigator{
  display:flex; 
  align-items:center; 
  justify-content:center;
}

工作小提琴： https://jsfiddle.net/odecLzad/

垂直对齐两个按钮

2 个答案: