如何使用CSS對齊盒子內部的鏈接？

Question

我的目標是製作一個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

我認爲你在尋找這樣的事情：

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

那麼你的風格會是這樣的：

.article-item { 
ADD STYLES HERE 
} 

.article-item h1{ 
ADD STYLES HERE 
} 

.article-item p{ 
ADD STYLES HERE 
} 

等等...