如何使用 CSS 将链接在盒子内相互对齐？

Question

我的目标是制作一个 DIV，在 hover 上显示最新的四个新闻链接，并带有标题和小图片。

该框将很小（150 像素高 x 50 像素宽），并将扩展到大约 500 像素。单击一篇文章后，它将弹出一个您可以退出的框。该框将在其余内容上放置一个深色层，以便用户集中注意力。

无论如何...这是我目前拥有的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
}

等等......