html - Css 列表对齐问题

Question

嘿伙计们，我有以下问题:

• >

我看到那些箭头没有与文本对齐，我已经尝试了很多东西但我没有找到解决方案，也许你可以帮助我，这是我的代码:

    .domains-wrapper .sidebar{
        width: 203px;
    }
                   /* For the background */
        .domains-wrapper .links .the-top{
            background: url(/images/top-sidebar-domains.png) no-repeat;
            width: 202px;
            height: 7px;
        }

                    /* For the background */
        .domains-wrapper .links .repeat{
            background: url(/images/repeat-sidebar-domains.png) repeat-y;
            width: 202px;
        }

                            /*---HERE STARTS THE CODE FOR THE LIST ITEMS---*/

            .domains-wrapper .links .repeat ul{
                padding-top: 14px;
                padding-bottom: 14px;
                padding-left:8px;
                padding-right: 8px;
            }
                .domains-wrapper .links .repeat ul li{
                    font-size: 12px;
                    font-weight: bold;
                    padding-left: 5px;
                    height: 47px;
                    border-bottom: 1px solid #f1f1f1;
                }
                .domains-wrapper .links .repeat ul li.hover{
                    background-color: #71ab32;
                }
                .domains-wrapper .links .repeat ul li.active a{
                    background: url(/images/sidebar-domains-arrows.png) no-repeat 0px 0px;
                }                   
                    .domains-wrapper .links .repeat ul li a{
                        display: inline-block;
                        background: url(/images/sidebar-domains-arrows.png) no-repeat 0px -96px;
                        padding-left: 29px;
                        color: #000;
                        height: 25px;
                        line-height: 47px;
                    }

                    .domains-wrapper .links .repeat ul li.hover a{
                        background: url(/images/sidebar-domains-arrows.png) no-repeat 0px -46px;
                        color: #fff;
                    }
                    /*---HERE ENDS THE CODE FOR THE LIST ITEMS---*/


                    /* For the background */
        .domains-wrapper .links .bottom{
            background: url(/images/bottom-sidebar-domains.png) no-repeat;
            width: 202px;
            height: 7px;                
        }

和 HTML

            <div class="links">
            <div class="the-top"></div>
            <div class="repeat">
                <ul>
                    <li class="active"><a href="#">Link 1</a></li>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 1</a></li>
                </ul>
            </div>
            <div class="bottom"></div>
        </div><!-- end /.links -->

我在做什么错了吗？

Answer 1

您似乎在使用 css-sprite。只需调整数字(-46 和 -96)直到正确，并消除不一致，例如 height 小于 line-height。

编辑顺便说一下，对于 IE6 的链接，您可能希望切换到 block 而不是 inline-block。