CSS div和li間距問題

如何讓div底部有1 px邊框？而不是那厚厚的灰色條。 div持有ul與id="widget-content"有一個1px的填充白色背景給予1px的邊界印象。CSS div和li間距問題

無論我做什麼，如果我嘗試摺疊窗口小部件內容div或展開li div。在ul中可以有多於3個li。

enter image description here

HTML

<div id="content">

<div id="widget-head"> 
<h3><a href="#" target="_blank">CHANNEL</a></h3> 
     <div id="widget-edit"><img src="images/icons/settings_g.png" width="12" height="12"></div> 
    </div> 
    <div id="widget-content"> 
     <ul id="widget-feeds"> 
     <li> 
      <div> 
      <a href="#" > <img src="images/icons/hidden.gif" name="123311"> </a> <a href="#" target="_blank" title="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet tortor sit amet nunc interdum</a> 
     </div> 
     <div class="widget-desc"> 
     <p>description text here</p> 
     </div> 
    </li> 

    <li> 
     <div> 
     <a href="#" > <img src="images/icons/hidden.gif" name="123311"> </a> <a href="#" target="_blank" title="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet tortor sit amet nunc interdum</a> 
     </div> 
     <div class="widget-desc"> 
     <p>description text here</p> 
     </div> 
    </li> 

    <li> 
     <div> 
     <a href="#" > <img src="images/icons/hidden.gif" name="123311"> </a> <a href="#" target="_blank" title="title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet tortor sit amet nunc interdum</a> 
     </div> 
     <div class="widget-desc"> 
     <p>description text here</p> 
     </div> 
    </li> 
    </ul> 
</div>

和我有關CSS

#content #widget-container { 
    width: 30%; 
    background-color: #ddd; 
    float: left; 
    margin-top: 25px; 
    margin-bottom: 25px; 
    margin-left: 25px; 
    white-space: nowrap; 
    display: block; 
} 
#content #widget-container #widget-head { 
    height: 25px; 
    padding: 5px; 
    overflow: hidden; 
    line-height: 25px; 
} 
#content #widget-container #widget-head h3 { 
    font-size: 14px; 
    width: 90%; 
    float: left; 
} 
#content #widget-container #widget-head #widget-edit { 
    float: right; 
    width: 12px; 
    padding-top: 5px; 
} 
#content #widget-container #widget-content { 
    background-color: #FFF; 
    margin: 1px; 

} 
#content #widget-container #widget-content #widget-feeds ul { 
overflow: auto; 
} 
#content #widget-container #widget-content #widget-feeds li { 
    display: block; 
    white-space: normal; 
    word-wrap: normal; 
    margin-bottom: 5px; 
    padding: 4px; 
} 
#content #widget-container #widget-content #widget-feeds li a { 


} 
#content #widget-container #widget-content #widget-feeds li .widget-desc { 
    white-space: normal; 
    display: none; 
    margin-bottom: 4px; 
    padding-top: 2px; 
    padding-right: 10px; 
    padding-bottom: 5px; 
    padding-left: 15px; 
    overflow: hidden; 
}

來源

2013-10-24 JasonBourne

底部的可見greyness不是一個邊界，它實際上是由於無序列表的底部邊緣，這就造成在底部的空白處。

下面將消除這種空間：

#widget-feeds { margin-bottom: 0 } 
#widget-feeds li { margin-bottom: 0 !important; padding: 4px 0 9px 0 !important; }

注意我上面的解決方法是不是很好的做法，你應該修改現有的樣式，以滿足這些變化，而不是將我在這裏指定的規則。

來源

2013-10-24 21:24:25

對不起，沒有解決它。 – JasonBourne

@JasonBourne對，這個問題也與列表項的底部邊距有關。看到我編輯的答案請 –

哦，我明白了。謝謝！這是邊距。 GAAAAH！ – JasonBourne

CSS div和li間距問題

回答

相關問題