Question

所以我创建了一个带有复选框的自定义下拉菜单，允许用户在下拉菜单中显示一些常量值，复选框的值与左侧对齐。

这是我的模板：

＆＃13;

"<div class=\"multiselect-parent btn-group dropdown-multiselect\">\n" +
    "\t<button  ng-click=\"toggledropdown()\" td-ui-margin=\"0\" class=\"dropdownlist-button\" ng-disabled=\"!edit\" type=\"button\">\n" +
    "\t\t<span ng-if=\"customSelect\">{{customSelect}}</span>\n" +
    "\t\t<span ng-if=\"!customSelect\">{{modelList.length}} {{'MULTISELECT_DROPDOWN.CHECKED' | translate}} &nbsp;<i class=\"caret\"></i></span>\n" +
    "\t</button>\n" +
    "\t<ul class=\"dropdown-menu dropdown-menu-form\" ng-style=\"{display: open ? 'block' : 'none', height : '200px' }\" style=\"overflow: scroll\" >\n" +
    "\t\t<li td-ui-margin=\"5\">\n" +
    "\t\t\t<span class=\"headerPointer\" ng-click=\"selectAll()\"><span class=\"glyphicon glyphicon-ok\"></span> {{'MULTISELECT_DROPDOWN.CHECKALL' | translate}} </span>\n" +
    "\t\t</li>\n" +
    "\t\t<li ui-margin=\"5\">\n" +
    "\t\t\t<span class=\"headerPointer\" ng-click=\"deselectAll();\"><span class=\"glyphicon glyphicon-remove\"></span> {{'MULTISELECT_DROPDOWN.UNCHECKALL' | translate}} </span>\n" +
    "\t\t</li>\n" +
    "\t\t<li  class=\"divider\"></li>\n" +
    "\t\t<li role=\"presentation\" ng-repeat=\"option in options  | orderBy : 'id'\"  ui-margin=\"5\">\n" +
    "\t\t\t<span class=\"td-checkbox-div-wrapper headerPointer\" ><input type=\"checkbox\"  ng-click=\"selectItem(option)\" ng-checked=\"isChecked(option)\">\n" +
    "\t\t\t<label>{{option[field]}}</label></span>\n" +
    "\t\t</li>\n" +
    "\t</ul>\n" +
    "</div>\n"

＆＃13;

这是我使用模板并填充它的地方

＆＃13;

 <div class=\"col-xs-2 setup-case-checkbox multiselect-spacing\"\n" +
    "                     ng-if=\"model.frequencyInterval.frequencyIntervalType === 'SEASONAL'\">\n" +
    "                    <multiselect-dropdown options=\"months\" model=\"model.frequencyInterval.customPeriod\"\n" +
    "                                             field=\"period\"\n" +
    "                                             edit=\"true\"\n" +
    "                                             aria-labelledby=\"seasonal\"></multiselect-dropdown>\n" +
    "                </div>\n" +

＆＃13;

但是，当我查看它呈现的页面时，它没有正确对齐

我该怎么做才能将它与左边对齐？

Answer 1

在您想要左对齐的每一行中加入此内容：style="text-align: left;"

你也可以上课

.left{
    text-align: left;
}

并像这样称呼它 class="left"

您能否编辑您的帖子以包含CSS？

Answer 2

在您的css文件中添加

.td-checkbox-div-wrapper{
     text-align: left;
    }

下拉框中的文本对齐复选框

2 个答案: