Question

我有一个js小提琴我需要在两个div之间填充，我在div上放置了一个css填充规则，需要填充但是它没有被应用：

.gap {
        display: inline-block;
        width: 15%;
        height: 300px;
        float: left;
        background-image: url("/images/forward_enabled_hover.png");
        background-repeat: no-repeat;
        background-position: center center;
    }

    .feature-addons {
        background-color: #303030;
        width: 100%;
        color: #ffffff;
        font-size: 15px;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .feature-container {
        display: inline-block;
        width: 40%;
        float: left;
        overflow: hidden;
    }

    .feature-item {
        padding: 5px;
        height: 50px;
        display: block;
    }

    .feature-options {
        background-color: #f5f5f5;
        display: block;
        width: 100%;
        height: auto;
        background-image: url("/images/plus.png");
        background-repeat: no-repeat;
        background-position: center right;
    }

    .radio-button {
        display: none;
    }

HTML：

<div id="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_UpdatePanel_Features">
<div id="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_Panel_FeatureOptions">
    <div class="call-features-table">
        <div id="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_Panel_SelectFeatures" class="feature-container">
            <div class="feature-addons">Feature add-ons</div>
            <label for="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_RadioButton_Item" id="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_Label_FeatureItem">
                <div id="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_Panel_FeatureItem" class="feature-item">
                    <div class="feature-options">
                         <h4>Title</h4>

                        <p>lorum ipsum</p>
                        <p>lorum ipsum</p> <span class="radio-button"><input id="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_RadioButton_Item" type="radio" name="ctl00$ContentPlaceHolder_Content_Wraper$ctl01$RadioButton_Item" value="RadioButton_Item" /></span>

                    </div>
                </div>
            </label>
            <label for="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_RadioButton_Item" id="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_Label1">
                <div id="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_Panel1" class="feature-item">
                    <div class="feature-options">
                         <h4>Title</h4>

                        <p>lorum ipsum</p> <span class="radio-button"><input id="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_RadioButton1" type="radio" name="ctl00$ContentPlaceHolder_Content_Wraper$ctl01$RadioButton1" value="RadioButton1" /></span>

                    </div>
                </div>
            </label>
        </div>
        <div class="gap"></div>
        <div id="ctl00_ContentPlaceHolder_Content_Wraper_ctl01_Panel_SelectedFeatures" class="feature-container"></div>
    </div>
</div>

如何在两个功能项 div之间创建所需的填充？

Answer 1

从功能项div中删除高度。

.feature-item {
    padding: 5px;
    display: block;
}

Answer 2

您已为feature-item定义了不允许div之间空格的高度。尝试删除高度或指定更高的值。

Answer 3

您正在将功能项类应用于已经是块元素的div，删除高度将解决您的查询，但删除额外的CSS也将提高您的代码质量。所以你只需要写： -

.feature-item {
    padding: 5px;
}

动态生成的div之间的css填充

3 个答案: