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

このフィドルをチェックしてください

追加された位置:relativeに<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 に答える