jquery - 将 Logo 与导航链接对齐，并将 Logo 置于响应模式的链接上方

Question

我试图将 Logo 与几个导航链接对齐，其中大多数网站的 Logo 在左侧，几个链接在右侧(这是我正在努力实现的目标)。

我有一个媒体查询，使标题 Logo 显示在导航链接上方。

但是好像不行。

我确实有一个外部 JQuery，它在浏览器宽度达到 600 像素时运行网站的响应部分。

我需要两个方面的帮助:

1. 将 Logo 与导航链接对齐。 Logo 标记为 JJ，第二个 J 倒置。
2. 将 Logo 放在导航链接上方，并在浏览器宽度达到 720 像素时将其和导航链接居中。

代码示例: http://jsfiddle.net/ERJp5/3/

谢谢。

Answer 1

“特殊框”上的 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;
}
}

希望这对您有所帮助!

http://jsfiddle.net/ERJp5/1/