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

Question

表单字段在 Firefox 中未排列

我自己解决了这个问题，但花了一点时间...我想我会把它分享出来，如果有更优雅的跨平台解决方案也很好。

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

中的示例

这是代码背景：

Symfony 2 表单生成器
Bootstrap 自定义 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;
 }
}

通过一些修补使所有内容对齐：

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

Mozilla Firefox form input fields and buttons not lining up

css

styling

less

symfony

twig

表单字段在 Firefox 中未排列

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