Mozilla Firefox 表单输入字段和按钮未对齐

Question

在 Firefox 中表单字段不对齐

自己解决了这个问题，但花了一点时间……想我会分享出来，也很高兴知道是否有更优雅的跨平台解决方案。

---

这个问题非常相似，如果不一样的话：How can I align my checkbox with CSS。我看到的不同之处在于，在 Chrome 中，字段排列得很好。在 Firefox 中，它们看起来像链接中的示例。

这是代码背景：

• Symfony 2 表单生成器
• 带有自定义 Less/CSS 样式的引导程序
• Twig/Html 渲染

我最初认为 flexbox 样式可能会提供一个解决方案，因为它在过去帮助我解决了对齐问题，在研究了几个不同的示例后，我发现这根本没有帮助，并且转向了一个更简单但可能不太优雅的解决方案。

很难重新创建问题的工作示例，不知道如何或是否可以在 codepen 中设置特定的背景，但这是 .html.twig 文件中的代码块：

 {{ form_start(form) }}
    {{ form_errors(form) }}
    {{ form_row(form.id) }}
    {{ form_row(form.embedded) }}
    <div class="row">
        <div class="col-xs-12"><label id="subformHeader">Field(s)</label></div>
    </div>
    <ul id="sortable" class="fields subform" data-prototype="{{ form_widget(form.fields.vars.prototype)|e }}">
        {% for key, field in form.fields %}
                <li>
                    <span class="glyphicon glyphicon-sort"></span>
                    {{ form_row(field.name) }}{{ form_row(field.type) }}{{ form_row(field.options) }}
                </li>
        {% endfor %}
    </ul>
    <div class="btn-toolbar">
        <input type="submit" value="Save" class="btn btn-primary pull-left" />
        {% if id %}
        <a class="btn btn-warning pull-left" id="delete" href="?delete=y&id={{id}}">Delete</a>
        <a href="{{path('path_to_data')}}" class="btn btn-warning pull-left" id="reset">Reset</a>
        {% endif %}
    </div>
{{ form_end(form) }}

这是 CSS/Less：

.subform {
 list-style: none;
 li {
    div {
        display: inline-block;

        label {
            display: none;
        }
     }
     .deleteLink, .fieldOptions {
        margin-left: 4px;
     }
 }
 li:first-child div label {
    display: inline;
 }
}

Answer 1

这是我想出的解决方案...

.subform {
 list-style: none;
 li {
    div {
        display: inline-block;

        label {
            display: none;
        }
        .form-group {
        box-sizing: border-box;
        vertical-align: bottom;
        }
     }
     span {
         vertical-align: 150%;
     }
     a {
        vertical-align: 110%;
     }
     span.glyphicon-option-horizontal,span.glyphicon-minus {
        vertical-align: -7%;
     }
     .deleteLink, .fieldOptions {
        margin-left: 4px;
     }
 }
 li:first-child div label {
    display: inline;
 }
}

这一切都经过了一些修改：