1

这是我的代码的小提琴:http: //jsfiddle.net/ZWQpb/

这是HTML:

<div class="blog-entry">
            <ol>
                <li><h4 class="title"><a href="">10 moments in cinematic history changing thus</a></h4></li>

                <li><h4 class="title"><a href="">Testing this theme with image</a></h4></li>

                <li><h4 class="title"><a href="">More experimental things and more</a></h4></li>

                <li><h4 class="title"><a href="">The video that defined a new definition</a></h4></li>

                </ol>
</div>

和CSS:

body {
    padding: 50px;
}

.blog-entry {
    padding-left: 32px;
    position: relative;
    width: 248px;
}
.blog-entry ol {
    color: #999999;
    font: italic 3em Arial,sans-serif;
    list-style-type: decimal;
}
.blog-entry h4.title {
    color: #48423F;
    font-family: Arial,sans-serif;
    font-size: 16px;
    padding-left: 25px;
    padding-right: 33px;
    text-shadow: none;
}

我希望每个列表项从数字的顶部对齐。以这张图片为例:列表

我怎样才能做到这一点?随时更新小提琴:http: //jsfiddle.net/ZWQpb/

4

3 回答 3

1

我找到的唯一解决方案是,li 和 h4 类的字体大小应该相同。

在这里查看另一个http://jsfiddle.net/ZWQpb/12/

于 2012-08-22T11:40:06.227 回答
1

像这样的东西?

.title {
    float:right;
    margin-top:10px;
}

http://jsfiddle.net/ZWQpb/11/

于 2012-08-22T11:40:08.580 回答
0

检查这个小提琴

添加了 position: relativeto <li>,对 h4absolute进行了一些边距调整,使 h4

.blog-entry ol li{
    position: relative;
    margin-top: -12px;
}

.blog-entry h4.title {
    position: absolute;
    top: 5px;
    color: #48423F;
    font-family: Arial,sans-serif;
    font-size: 16px;
    padding-left: 25px;
    padding-right: 33px;
    text-shadow: none;
    vertical-algin: bottom;
}

margin-top如果您希望行更接近,请减少。

于 2012-08-22T11:53:37.467 回答