1

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;
}

意図した出力の例 -

リスト項目 - ニュース

4

1 に答える 1

2

これを試して

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}

デモ

于 2012-12-06T09:57:13.313 に答える