Question

我现在正面临着HTML / CSS的一个小问题。

首先，我想实现这个目标：

http://s27.postimg.org/wn17ahx5f/de.png

4张图片是一张精灵，我已经设法在页面上剪切和定位。问题在于边框和文本位于它们的底部。

我该怎么办？目前我有这个：

                    <div class="stats-number-block-toto">
                        <ul class="icone-stats">
                            <li class="icone-forums"><div class="text-forums">Test text</div></li>
                            <li class="icone-utilisateurs"></li>
                            <li class="icone-sujets"></li>
                            <li class="icone-messages"></li>
                        </ul>
                    </div>

CSS：

    .stats-block-toto {
    float: left;
}

.stats-block-toto .titre-bloc-toto {
    float: left;
    border-bottom: 1px solid #c7c6c6;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.stats-number-block-toto {
    float: left;
    background-color: #FFFFFF;
    width: 100%;
}

.icone-stats li {
    float: left;
    width: auto;
    margin-top: 20px;
    width: 60px;
    height: 60px;
    display: inline-block;
    background: url("img/forumjv/icones-stats.png") no-repeat;
}

.icone-stats .icone-forums {
    background-position: 0 0;
    margin-right: 100px;
 }

.icone-stats .icone-utilisateurs {
    background-position: 33% 0;
    margin-right: 100px;
}
.icone-stats .icone-sujets {
    background-position: 66% top;
    margin-right: 100px;
}
.icone-stats .icone-messages {
    background-position: 100% top;
}

.text-forums {
    border-top: 1px solid black;
    padding-top: 15px;
    width: 100px;
    margin-top: 80px;
}

正如我所说，我的精灵很好，这是文本和边框失败。

这是jsfiddle：

http://jsfiddle.net/gc4HT/

任何人都有解决方案吗？

谢谢！

Answer 1

JSFiddle

使宽度与文字类（100px）的大小相同，或完全删除width属性。

在我的jsFiddle中，我将它设置为相同的大小，添加了一个占位符图像，以便您可以看到它的大致外观并添加了text-align:center;在您的文字中，以便您的文字与图片对齐。

每个li中背景图片看起来“怪异”的原因是因为background-position在所有这些上都发生了变化，而且它只是在运行1个背景图像，每次重复一次。但是当你使用自己的精灵并找到正确的background-position时，它应该看起来很好。

Answer 2

这个小提琴将起作用：http://jsfiddle.net/rajmathan/AThr4/

HTML：

 <div class="stats-number-block-forumjv">
                    <ul class="icone-stats">
                        <li class="icone-forums"><div class="text-forums">Test text</div></li>
                        <li class="icone-utilisateurs"></li>
                        <li class="icone-sujets"></li>
                        <li class="icone-messages"></li>
                    </ul>
                </div>

CSS：

       .stats-block-forumjv {
        float: left;
    }

    .stats-block-forumjv .titre-bloc-forumjv {
        float: left;
        border-bottom: 1px solid #c7c6c6;
        padding-bottom: 10px;
        margin-bottom: 15px;
    }

    .stats-number-block-forumjv {
        float: left;
        background-color: #FFFFFF;
        width: 100%;
    }

    .icone-stats li {
        float: left;
        width: auto;
        margin-top: 20px;
        width: 60px;


        display: inline-block;
        background: url("http://s27.postimg.org/wn17ahp5f/design.png") no-repeat;
    }

    .icone-stats .icone-forums {
        background-position: 0 0;
        margin-right: 100px;
     }

    .icone-stats .icone-utilisateurs {
        background-position: 33% 0;
        margin-right: 100px;
    }
    .icone-stats .icone-sujets {
        background-position: 66% top;
        margin-right: 100px;
    }
    .icone-stats .icone-messages {
        background-position: 100% top;
    }

    .text-forums {
        border-top: 1px solid black;
        padding-top: 15px;
        width: 100px;
        margin-top: 80px;
    }

CSS中的精灵和定位边框

2 个答案: