Question

我正在尝试创建一个带有精灵图像的导航菜单，我几乎就在那里，但我无法让它们在标题内对齐。有人能告诉我我失踪了吗？如果单击“活动源”按钮，您将看到我希望它如何对齐，位于徽标容器的红色边框右侧：http://timc-projects.com/VR%20BLOG/index.html

Answer 1

用你的css替换这个css希望能帮到你。

        <style>
    #logoContainer {
        border-right: 1px solid #9e0b0f;
        float: left;
        height: 70px;
        margin-top: 12px;
        width: 325px;
    }
    ul#nav-top {
        float: left;
        height: 70px;
        list-style: outside none none;
        margin: 0 0 0 -10px;
        width: 333px;
    }
    </style>

Answer 2

您也可以尝试使用此CSS进行完美布局。

#logoContainer {
border-right: 1px solid #9e0b0f;
float: left;
height: 59px;
margin-top: 12px;
width: 325px;
}
ul#nav-top {
float: left;
height: 70px;
list-style: outside none none;
margin: 0 0 0 -10px;
width: 333px;
}

.logo {
background: rgba(0, 0, 0, 0) url("images/sprite-nav.png") repeat scroll 0 0;
height: 105px;
margin-left: 36px;
margin-top: -4px;
position: relative;
top: 11px;
width: 270px;
}

 #logoContainer {
border-right: 1px solid #9e0b0f;
float: left;
height: 60px;
margin-top: 12px;
width: 325px;
}

在CSS中的标题中对齐精灵图像导航按钮

2 个答案: