我自己解决了这个问题,但是花了一点时间......想到我会分享它,也很高兴知道是否有更优雅的跨平台解决方案。
问题非常相似,如果与此问题不一样:How can I align my checkbox with CSS。我看到的不同之处在于Chrome中的字段很好。在Firefox中,它们看起来像链接中的示例。
这是代码背景:
我原本以为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;
}
}
答案 0 :(得分:0)
.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;
}
}
通过一些修修补补一切: