html - 将CSS属性分配给 parent ，而不是 child

Question

在我的应用程序中，我使用的是 bootstrap-tagsinput Angular 版本(在 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>

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

dashboard.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;
    }
}

我在上图中显示的那个 Bootstrap 输入标签元素没有出现在这个弹出窗口中。

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

中的元素继承？

Answer 1

似乎您覆盖了 css 定义，这使得 <input>元素显示 block 而不是 float /内联。

我不知道这是否是解决方案，但查看这两种情况之间的差异我建议关闭 <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>