参考サイトを作ってみました。「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;
}