html - 将 css 属性分配给父级，而不是子级

Question

在我的应用程序中，我使用的是 bootstrap-tagsinput 角度版本（在 smartadmin 中），它看起来像这样

引导输入标签的代码：

<div class="row">
     <div class="col-sm-12">
          <div class="form-group">
               <label>Type and enter to add an SMA</label>
               <input smartTags class="form-control tagsinput" value="{{tagsValues}}" data-role="tagsinput">
          </div>
     </div>
</div>

我在我的仪表板内的小部件中使用它作为下拉弹出窗口中的小部件工具栏

仪表板.component.html

<div class="widget-toolbar">
            <div class="btn-group dropdown dropdown-large" dropdown>
                <a class="button-icon" title="SMA Filter" dropdownToggle aria-expanded="true">
                    <i class="fa fa-cog"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-large filterDropwdownViewAlign" (click)="$event.stopPropagation()">
                    <div id="checkout-form" class="smart-form">
                        <header id="filterHeader">SMA</header>
                        <fieldset>
                            <form>
                                <div class="row form-group">
                                    <section class="col col-xs-12">
                                        <label class="form-control" style="border:0px;height:auto">
                                            <input id="smartTagInput" smartTags class="form-control tagsinput" value="{{smaValues}}" data-role="tagsinput">
                                        </label>
                                    </section>
                                </div>
                            </form>
                        </fieldset>
                    </div>
                </div>
            </div>
        </div>

我已将 css 属性应用于弹出框

.filterFormAlign {
    margin-bottom: 0px !important;
    margin-top: 0px !important;
    padding-right: 0px  !important;

}
.filterFormAlignToggle{
    padding-left: 0px  !important;
}
.filterDropwdownViewAlign {
    margin: 35px 0 0;
    top: 3px;
    padding: 0px !important;
}
@media only screen and (min-width:768px) {
    .filterDropwdownViewAlign {
        min-width: 335px !important;
        left: -296px !important;
    }
}
@media only screen and (max-width: 479px) and (min-width: 320px) {
    .filterDropwdownViewAlign {
        min-width: 310px !important;
        left: -255px !important;
    }
}

如上图所示，该引导输入标签元素不在此弹出窗口中。

也许它的到来是因为css这个输入字段也继承了那些属性。那么有什么方法可以使这些css属性不会被input内部的标签或元素继承form

Answer 1

似乎您覆盖了 css 定义，它使<input>元素显示块而不是浮动/内联。

我不知道这是否是解决方案，但是查看两种情况之间的差异，我建议在元素之前而不是在输入元素之后关闭<label>标签，例如：<input>

<label class="form-control" style="border:0px;height:auto">
</label>
<input id="smartTagInput" smartTags class="form-control tagsinput" value="{{smaValues}}" data-role="tagsinput">

整个片段：

<div class="widget-toolbar">
            <div class="btn-group dropdown dropdown-large" dropdown>
                <a class="button-icon" title="SMA Filter" dropdownToggle aria-expanded="true">
                    <i class="fa fa-cog"></i>
                </a>
                <div class="dropdown-menu dropdown-menu-large filterDropwdownViewAlign" (click)="$event.stopPropagation()">
                    <div id="checkout-form" class="smart-form">
                        <header id="filterHeader">SMA</header>
                        <fieldset>
                            <form>
                                <div class="row form-group">
                                    <section class="col col-xs-12">
                                        <label class="form-control" style="border:0px;height:auto">
                                        </label>
                                            <input id="smartTagInput" smartTags class="form-control tagsinput" value="{{smaValues}}" data-role="tagsinput">

                                    </section>
                                </div>
                            </form>
                        </fieldset>
                    </div>
                </div>
            </div>
        </div>