[英]CSS Div and li spacing issue
如何使div
在底部具有1 px邊框? 而不是那個粗的灰色條。 包含id="widget-content"
的ul
的div
具有白色背景,帶有1px的填充,以產生1px的邊框印象。
無論我做什么,如果我嘗試折疊小部件內容div
或擴展li div
。 ul
可能有超過3 li
。
的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;
}
底部的可見灰色不是邊框,這實際上是由於無序列表的底部頁邊距導致底部的空白。
以下將消除此空間:
#widget-feeds { margin-bottom: 0 }
#widget-feeds li { margin-bottom: 0 !important; padding: 4px 0 9px 0 !important; }
請注意,我的上述修復方法不是好的做法,您應該編輯現有的樣式表以適應這些更改,而不是應用我在此處指定的規則。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.