CSSを使ってボックスの内側でリンクを並べる方法は？

Question

私の目標は、最新の4つのニュースリンクをタイトルと小さな画像で紹介するDIVをhoverにすることです。

ボックスは小さく（縦150px×横50px）、約500pxに拡大します。記事がクリックされると、それを終了する可能性のあるボックスが表示されます。このボックスは、コンテンツの残りの部分にダークレイヤーを配置し、ユーザーがフォーカスするようにします。

とにかく...ここに私のCSSがあります。

#news { 
    position: fixed; 
    top: 250px; 
    left:0px; 
    background-color: blue; 
    min-width: 20px; 
    max-width: 600px; 
    height: 200px; 
} 

#news a { 
    display: none; 
    padding-bottom: 5px; 
    color: white; 
} 

#news:hover { 
    display: block; 
    padding: 0px 10px 0px 0px; 
} 

#news:hover a { 
    display: block; 
} 

私のHTMLは、位置を編集するaタグを使用していますが、誰もがきちんと見て、私の命令に従わdivの内側の箱を作って行く方法上の任意の提案を持っていた場合不思議でしたか？

Answer 1

私はあなたがこのような何かを探していると思う：

...

.article-item { 
ADD STYLES HERE 
} 

.article-item h1{ 
ADD STYLES HERE 
} 

.article-item p{ 
ADD STYLES HERE 
} 

その他、各種：

<div id="news"> 
    <ul id="articles"> 
     <li class="article-item"> 
      <h2>Article 1!</h2> 
      <p>Here is some text for the article.</p> 
     </li> 

     <li class="article-item"> 
      <h2>Article 2!</h2> 
      <p>Here is some text for the article.</p> 
     </li> 

     <li class="article-item"> 
      <h2>Article 3!</h2> 
      <p>Here is some text for the article.</p> 
     </li> 
    </ul> 
</div> 

次に、あなたのスタイルがこのようなものになるだろう