如何使用CSS在一个框内对齐彼此顶部的链接？

我的目标是制作一个DIV，在

悬停

上显示最新的四个新闻链接，标题和一个小图片

盒子将很小（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内的框看起来整洁并符合我的命令有任何建议？

---

我想你在寻找这样的东西：

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

等等