Question

以下是代码＆amp;这是我要添加到标题的image（徽标位于中心，徽标每侧有2个导航菜单）。 Here是我想要居中徽标的页面。导航，你会在哪里放置HTML代码，因为我不太确定它在哪里。任何建议都非常感谢

 #logo { 
    background:url(images/tigerPawsLogo87x87.png) no-repeat;
    background-size: 87px 87px;
     width: 87px;
     height: 87px;
     position: absolute;
     top: 20px;
     left: 460px;
}

header {
        width: 960px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

nav li{
    display: inline-block;
    padding: 40px 30px 37px 0;
}

nav li:nth-child(2) {
    padding-right: 20px;
}

nav li:nth-child(3) {
    padding-left: 20px;
}  

<header>
        <nav>
            <ul>
                <li>Home</li>
                <li>Catalogue</li>
                <li>Forum</li>
                <li>Contact</li>
            </ul>
        </nav>
        <div id="logo"></div>
</header>

Answer 1

你的代码似乎完全正常。只需根据徽标的大小增加nav li：nth-child（3）的填充左侧。

<style>
#logo { 
    background:url(http://chrisspooner.com/themes/portfolio/wp-content/themes/portfolio/images/logo.png) no-repeat;
    background-size: 87px 87px;
     width: 87px;
     height: 87px;
     position: absolute;
     top: 20px;
     left: 460px;
}

header {
        width: 960px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

nav li{
    display: inline-block;
    padding: 40px 30px 37px 0;
}

nav li:nth-child(2) {
    padding-right: 20px;
}

nav li:nth-child(3) {
    padding-left: 170px;
}  
</style>
<header>
        <nav>
            <ul>
                <li>Home</li>
                <li>Catalogue</li>
                <li>Forum</li>
                <li>Contact</li>
            </ul>
        </nav>
        <div id="logo"></div>
</header>

在wordpress

1 个答案: