代码之家 › 专栏 › 技术社区 › Uffo

Css列表对齐问题

css3 xhtml css html

Uffo · 技术社区 · 14 年前

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

正如我看到的那样,这些箭头与文本不一致,我尝试了很多方法,但没有找到解决方法,也许你能帮我,这是我的代码:

    .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 -->

我在做什么

2 回复 | 直到 8 年前

jeroen 14 年前

你好像在用css精灵。只需调整数字(-46和-96),直到它是正确的,并消除不一致,就像一个 height 这比 line-height .

编辑: 顺便说一句,您可能想切换到 block inline-block IE6的链接。

R. Hill 14 年前

背景箭头是a标记的一部分。怎么样:

padding-left: 29px;
background: url(/images/sidebar-domains-arrows.png) no-repeat left center;

所有情况下?