[英]HTML, CSS - Styling Lists - Best practices
我想在HTML / CSS中設置列表樣式,並想知道什么是最佳做法。
<ul class="newsItems">
<li>
<h5>July 16, 2012</h5>
<p>News - headline information</p>
</li>
</ul>
我需要顯示一個小報紙圖標,以及在其右側的H5和P中的文本,並且它們需要內聯顯示(從左至右)。
最好使用包含H5 / P元素的LI來執行此操作,還是有一個我不知道的更好的方法?
我的CSS當前看起來像這樣:-
#News .newsItems {
padding-left:10px;
display:inline;
}
#News .newsItems li {
list-style-image:url(/Images/NewspaperIcon.png);
list-style-position:Inside;
}
#News .newsItems li {
vertical-align:top;
max-width:180px;
}
#News .newsItems li h5 {
vertical-align:top;
}
#News .newsItems li p {
vertical-align:top;
}
預期輸出的示例-
嘗試這個
的CSS
ul.newsItems{
margin:0; padding:0;
}
ul.newsItems li {
height:auto;
display:inline-block;
list-style:none;
padding-left:40px; max-width:180px;
background: url('http://www.parker.edu/uploadedImages/1200_Newsletters/1214_Buttons/Newsletter-Icon.png') left top no-repeat;
}
.newsItems li span{
vertical-align:top; font-weight:bold;
}
.newsItems li p {margin:0; padding:0}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.