css - 需要帮助设置此列表的样式

Question

我正在设计来自 wordpress 插件的最近帖子和图像列表。我知道有一个 wordpress 部分，但我的问题是就如何设置此列表的样式获得一些建议。

网站在这里

这就是它现在的样子。

这是我的 CSS

.advanced-recent-posts { 
        list-style-type: none; 
    }

    .advanced-recent-posts li { 
        font-size: .7em; 
        font-weight: bold; 
        line-height: 20px; 
        color: #761616; 
        margin-bottom: 10px;
        text-transform: uppercase; 
        width: 250px; 
        position: relative; 
        top: -35px; 
        border: 1px solid #000;
    }

    .advanced-recent-posts li a {
        margin-left: 10px;
    }

    .advanced-recent-posts li img {
        position: relative; 
        top: 0px; 
        left: -10px; 
        padding: 5px; 
        border: 1px solid #999;
    }

到目前为止一切顺利。但是因为图像和标题和日期都在一些

它们一起移动，这不是我想要的，但因为它是一个插件，我不知道如何改变它。因此，我希望通过提供的网站和 CSS，有人可以帮助我将最近每篇文章的第二行直接放在第一行之下。就像我在这里的设计一样。

@Bonjour：这就是我要做的

.advanced-recent-posts li { display:table-row; vertical-align:top;}

（当然还有我上面的所有其他样式）

帖子标题至少是正确的。

Answer 1

尝试修改锚的样式，即。

.advanced-recent-posts li a {
    display: block;
    margin-left: 10px;
}

Answer 2

那里发生了一些奇怪的定位。无论如何，有两种方法可以做到这一点：

1. 将图像向左浮动，添加一点右/下填充。这样文字自然会在图像下方流动
2. li利用图像上的和设置的相对定位position:absolute，同时提供li足够的填充以从其下方移动文本。这样文字将永远不会在图像下方流动

示例：http: //jsfiddle.net/Ucrsk/

Answer 3

只是重申我在您问题中的评论，请尝试使用：

li {
    display:table-cell;
    vertical-align:top;
}

或者

li {
    display:table-row;
    vertical-align:top;
}