我正在尝试创建一个引用网站。我正在使用名为“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;
}
最佳答案
您需要稍微修改一下 CSS。首先,在header里面为heading指定如下样式:
#header h1 {
display: inline-block;
margin: 0px;
vertical-align: middle;
}
将 h1
的 display
属性指定为 display: inline-block
允许其他元素与标题出现在同一行中。
接下来,您需要删除用于 #header nav
的现有 CSS,并使用以下样式:
#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>
关于jquery - 我怎样才能得到左边的按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26770323/