由于菜单项和徽标的数量未知,我想将徽标放在项目周围,徽标应该在屏幕中间。
在这种情况下,最好的技术是什么?
nav {
text-align:center;
}
ul{
display:inline-block;
margin:0;
padding:0;
list-style-type:none;
}
li{
display:inline;
}
li+li{
margin-left:15px;
}
<nav>
<div id="logo"></div>
<ul>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
<li><a href="#">Menu5</a></li>
<li><a href="#">Menu6</a></li>
<li><a href="#">Menu7</a></li>
</ul>
</nav>
假设您希望徽标和li's
在同一行。。。没有简单的解决办法。我认为你需要一点jquery,但无论你找到什么解决方案,你都需要偶数个li's
。
有了这个jquery:
var middle = Math.ceil($("ul li").length / 2);
$("ul li:nth-child(" + middle + ")").after('<li class="logo"></li>');
您只需在ul
的中间添加一个额外的li
,稍后您可以使用css:样式添加图像
.logo {
width:100px;
height:20px;
background-image:url(your image);
background-repeat:no-repeat;
display:inline-block;
}
如本JSFIDDLE
在ul-li中使用徽标,或者可以左右两个菜单更好。否则你必须做得更多。
nav {
text-align:center;
}
ul{
display:inline-block;
margin:0;
padding:0;
list-style-type:none;
}
li{
display:inline;
position: relative;
top: 50px;
}
li+li{
margin-left:15px;
}
#logo {
display: inline-block;
width: 100px;
height: 100px;
top: 13px;
background: #565656;
border-radius: 100%;
border: 1px solid #fff;
color: #fff;
}
#logo a {
color: #fff;
position: relative;
top:35px;
}
<nav>
<ul>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
<li class="logo" id="logo"><a href="#">Logo</a></li>
<li><a href="#">Menu5</a></li>
<li><a href="#">Menu6</a></li>
<li><a href="#">Menu7</a></li>
<li><a href="#">Menu8</a></li>
</ul>
</nav>