jquery - 需要帮助定制 jQuery portlet

Question

我对 CSS 的经验很少，也不知道如何自定义 jQuery portlet。

我有以下内容: Image link

我想要这样的东西: Image link

HTML:

<div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
    <div class="portlet-header ui-widget-header ui-corner-all">
        <span class="glyphicon glyphicon-trash"></span>
        <span class="glyphicon glyphicon-plus portlet-toggle"></span>
            nuevo campo
    </div>
    <div class="portlet-content" style="display: none;">
    </div>
</div>    

CSS:

.portlet {
    margin: 0 1em 1em 0;
    padding: 0.3em;
}

.portlet-header {
    padding: 0.2em 0.3em;
    margin-bottom: 0.5em;
    position: relative;
}

.portlet-toggle {
    position: absolute;
    top: 50%;
    right: 1%;
    margin-top: -8px;
}

.portlet-content {
    padding: 0.4em;
}

.portlet-placeholder {
    border: 1px dotted black;
    margin: 0 1em 1em 0;
    height: 50px;
}

我怎样才能做到这一点？

Answer 1

从 .portlet 类中删除填充并向 .portlet-header 类添加更多填充。