我怎样才能得到左边的按钮？

Question

我想创建一个参考网站。我正在使用名为“Skel”的新框架。它非常酷，但没有具体的文档。我想知道如何让导航栏上的按钮位于标题旁边，而不是右侧。这里是我使用的代码：

<header id="header" class="skel-layers-fixed"> 
    <h1><a href="#">Reference</a></h1> 
    <nav id="nav"> 
     <ul> 
      <li><a href="#top">Top</a></li> 
      <li><a href="index.html">Home</a></li> 
      <li><a href="page2.html">References</a></li> 
      <li><a href="page3.html">About</a></li> 
     </ul> 
    </nav> 
</header> 

下面是在style.css中

#header nav { 
    height: inherit; 
    line-height: inherit; 
    position: absolute; 
    right: 1.25em; 
    top: 0; 
    vertical-align: middle; 
} 

#header nav > ul { 
    list-style: none; 
    margin: 0; 
    padding-left: 0; 
} 

#header nav > ul > li { 
    border-radius: 4px; 
    display: inline-block; 
    margin-left: 1em; 
    padding-left: 0; 
} 

#header nav > ul > li a { 
    -moz-transition: color 0.2s ease-in-out; 
    -webkit-transition: color 0.2s ease-in-out; 
    -o-transition: color 0.2s ease-in-out; 
    -ms-transition: color 0.2s ease-in-out; 
    transition: color 0.2s ease-in-out; 
    color: #ccc; 
    display: inline-block; 
    text-decoration: none; 
} 

#header nav > ul > li a:hover { 
    color: #fff; 
} 

#header nav > ul > li:first-child { 
    margin-left: 0; 
} 

#header nav > ul > li .button { 
    height: 2.25em; 
    line-height: 2.25em; 
    margin-bottom: 0; 
    padding: 0 1em; 
    position: relative; 
    top: -0.075em; 
    vertical-align: middle; 
} 

#header .container { 
    position: relative; 
} 

#header .container h1 { 
    left: 0; 
} 

#header .container nav { 
    right: 0; 
} 

Answer 1

您将需要修改你的CSS一点点的导航栏内容。首先，指定以下样式用于报头内的标题：

#header h1 { 
    display: inline-block; 
    margin: 0px; 
    vertical-align: middle; 
} 

指定的h1的display属性为display: inline-block允许其他元件出现在同一行的标题。

接下来，你将需要删除现有的CSS您使用的是#header nav其中，并使用以下样式：

#header nav { 
    display: inline-block; 
    vertical-align: middle; 
} 

这里有一个工作示例：

#header nav { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
#header h1 { 
 
    display: inline-block; 
 
    margin: 0px; 
 
    vertical-align: middle; 
 
} 
 
#header nav > ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding-left: 0; 
 
} 
 
#header nav > ul > li { 
 
    border-radius: 4px; 
 
    display: inline-block; 
 
    margin-left: 1em; 
 
    padding-left: 0; 
 
} 
 
#header nav > ul > li a { 
 
    -moz-transition: color 0.2s ease-in-out; 
 
    -webkit-transition: color 0.2s ease-in-out; 
 
    -o-transition: color 0.2s ease-in-out; 
 
    -ms-transition: color 0.2s ease-in-out; 
 
    transition: color 0.2s ease-in-out; 
 
    color: #ccc; 
 
    display: inline-block; 
 
    text-decoration: none; 
 
} 
 
#header nav > ul > li a:hover { 
 
    color: #fff; 
 
} 
 
#header nav > ul > li:first-child { 
 
    margin-left: 0; 
 
} 
 
#header nav > ul > li .button { 
 
    height: 2.25em; 
 
    line-height: 2.25em; 
 
    margin-bottom: 0; 
 
    padding: 0 1em; 
 
    position: relative; 
 
    top: -0.075em; 
 
    vertical-align: middle; 
 
} 
 
#header .container { 
 
    position: relative; 
 
} 
 
#header .container h1 { 
 
    left: 0; 
 
} 
 
#header .container nav { 
 
    right: 0; 
 
}

<header id="header" class="skel-layers-fixed"> 
 
    <h1><a href="#">Reference</a></h1> 
 

 
    <nav id="nav"> 
 
    <ul> 
 
     <li><a href="#top">Top</a> 
 

 
     </li> 
 
     <li><a href="index.html">Home</a> 
 

 
     </li> 
 
     <li><a href="page2.html">References</a> 
 

 
     </li> 
 
     <li><a href="page3.html">About</a> 
 

 
     </li> 
 
    </ul> 
 
    </nav> 
 
</header>