我怎样才能得到左边的按钮?
问题描述:
我想创建一个参考网站。我正在使用名为“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 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>
法赫德,我怎么能得到它离标题约150像素? http://gyazo.com/62bb99a8f1b8dfeb76636ed4de9300a7 – 2014-11-06 01:53:41
您可以将'margin-left:150px'添加到'#header nav'或'margin-right:150px'到'#header h1'。上面给出的链接的图片是,在上面指定的CSS更改之后,它如何出现在您的网站上? – 2014-11-06 01:55:36
不,我将它回滚,以便更容易理解。 – 2014-11-06 01:56:37