需要幫助定製jQuery portlet

我對CSS很少有經驗，並不知道如何定製jQuery portlet。需要幫助定製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; 
}

我怎麼能做到這一點？

來源

2016-06-09 iRonth

好像更多的是CSS問題。我會刪除AngularJS標籤以支持CSS，以便爲您的問題吸引正確的受衆。 – jbrown

我剛剛創建codepen網址 - http://codepen.io/nagasai/pen/aZdwbq...請檢查並讓我知道..希望對您有所幫助 –

@jbrown Ty，固定 – iRonth

從.portlet類中刪除填充並向.portlet-header類添加更多填充。

來源

2016-06-09 20:21:40

幾乎在那裏，但仍然不是我想要它的方式。Image：http://i.imgur.com/24vF91Y .png – iRonth

刪除portlet頁眉margin-bottom –

好的！它的工作。最後一個問題，我該如何修復重疊的邊框？Image：http://i.imgur.com/RnNMaJ7.png – iRonth

.ui-dialog{ 
 
    margin:0; 
 
    padding:0; 
 
}

來源

2016-06-09 20:52:45 Normurod

當您回答解釋問題的問題以及您如何解決問題時，請添加更多信息 – tarzanbappa

需要幫助定製jQuery portlet

回答

相關問題