Question

我试图将徽标与几个导航链接对齐，其中大多数网站左侧都有徽标，右侧有几个链接（正是我想要实现的）。

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

然而它似乎不起作用。

我有一个外部JQuery，当浏览器的宽度达到600px时，它会运行网站的响应部分。

我需要在两个方面提供一些帮助：

将徽标与导航链接对齐。徽标标记为JJ，第二个J倒置。
当浏览器的宽度达到720px时，将徽标放置在导航链接上方，并将其居中和导航链接。

Code sample: http://jsfiddle.net/ERJp5/3/

Answer 1

“Special Box”上的浮动过渡边框正在推动元素向下移动。我添加了“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/

编辑：

这是一种（略微hacky）方式，您可以根据屏幕宽度移动您的徽标：

设置两个徽标，一个类bigscreen和一个类smallscreen：

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个查询，打开一个徽标，另一个取决于屏幕的宽度：

@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/

将徽标与导航链接对齐，并以响应模式将徽标放置在链接上方

1 个答案: