需要帮助设计此列表的样式

Question

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

The website is here

这就是现在的样子。

这是我的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;
    }

到目前为止一直很好。但是因为图像和标题都是＆amp;日期在一些

他们一起移动，这不是我想要的，但因为它是一个插件，我不知道如何改变它。所以我希望提供的网站和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;
}