Mozilla Firefox表示输入字段和按钮没有排列

Question

表单字段未在Firefox中排队

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

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

这是代码背景：

• Symfony 2表单构建器
• 自定义少量/ CSS样式的Bootstrap
• 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;
 }
}

通过一些修修补补一切：