我试图将 Logo 与几个导航链接对齐,其中大多数网站的 Logo 在左侧,几个链接在右侧(这是我正在努力实现的目标)。
我有一个媒体查询,使标题 Logo 显示在导航链接上方。
但是好像不行。
我确实有一个外部 JQuery,它在浏览器宽度达到 600 像素时运行网站的响应部分。
我需要两个方面的帮助:
- 将 Logo 与导航链接对齐。 Logo 标记为 JJ,第二个 J 倒置。
- 将 Logo 放在导航链接上方,并在浏览器宽度达到 720 像素时将其和导航链接居中。
代码示例:
http://jsfiddle.net/ERJp5/3/
谢谢。
最佳答案
“特殊框”上的 float 过渡边框将元素向下推。我添加了“margin-top: -13px;”它看起来好多了。
/*----Special box----*/
header nav ul li.menu-item-444 a {
/*background: none repeat scroll 0 0 #34495e;
border-radius: 15px;*/
font-family: Orena, Sans-Serif;
font-size:25px;
float: left;
padding: 13px;
margin-top: -13px;
color:white;
/*transition: color 0.25s ease-in;*/
}
检查一下: http://jsfiddle.net/juhc4/
编辑:
这里有一个(有点老套的)方法可以根据屏幕宽度移动您的 Logo :
设置两个标志,一个类大屏和一个类小屏:
ul
前面的一个 div,因为您希望它浮在所有内容之上,smallscreen
类:
<div id="menu-item-444" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-444 smallscreen">
<a href="index.html" title="Home">J<span class="mirror">J</span></a></div>
还有你的 li
元素,类 bigscreen
:
<li id="menu-item-444" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-444 bigscreen">
<a href="index.html" title="Home">J<span class="mirror">J</span></a></li>
接下来,我们在 CSS 中设置我们的 @media
查询,根据屏幕的宽度打开一个 Logo ,另一个关闭:
@media screen and (max-width: 720px){
.bigscreen {
display:none !important;
}
}
@media screen and (min-width: 721px){
.smallscreen {
display:none !important;
}
}
希望这对您有所帮助!
关于jquery - 将 Logo 与导航链接对齐,并将 Logo 置于响应模式的链接上方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21248540/