我怎樣才能得到左邊的按鈕？

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>