首页 > 代码库 > Css Study - Top Menu in Header 横向间隔的菜单
Css Study - Top Menu in Header 横向间隔的菜单
.shortcut ul li {
display: inline;
}
CSS
<style> ol, ul { list-style: none; } html, body, ul, li, div, form { margin: 0px; border: 0px; padding: 0px; font-size: 11px; color: #666; } .header { width: 100%; height: 100px; line-height: 100px; } .shortcut { width: 100%; line-height: 30px; height: 30px; background: #F7F7F7; border-bottom: 1px solid #eee; } .shortcut ul li { display: inline; } .shortcut .fl { left: 50px; position: absolute; } a { text-decoration: none; color: #666; } a:hover { color: #E4393C; text-decoration: underline; } .fav { top: 8px; left: 0; width: 13px; height: 13px; background: url(http://misc.360buyimg.com/lib/skin/2013/i/20130725.png) no-repeat 0 0; cursor: pointer; position: absolute; overflow: hidden; } .add_home { top: 8px; left: 78px; width: 13px; height: 13px; background: url(http://misc.360buyimg.com/lib/skin/2013/i/20130725.png) no-repeat 0 0; cursor: pointer; position: absolute; overflow: hidden; } .fl ul li a { margin-left: 20px; } .shortcut .fr { width: 500px; float: right; right: 20px; position: absolute; } </style>
Header
<div class="header"> <div class="shortcut"> <div class="fl"> <ul> <li><b class="fav"></b><a href=http://www.mamicode.com/"javascript:addToFavorite()" rel="nofollow">收藏我们</a></li> <li><b class="add_home"></b><a href=http://www.mamicode.com/"javascript:addToFavorite()" rel="nofollow">加为首页</a></li> </ul> </div> <div class="fr"> <ul> <li> <span style="color: #e3840a; font-weight: bold">Willa</span> 您好，欢迎使用My System! <%=DateTime.Now.ToString("yyyy-MM-dd hh:mm")%></li> <li><a>[退出]</a></li> <li>|</li> <li><a>On Duty</a></li> <li>|</li> <li><a>Off Duty</a></li> </ul> </div> </div> </div>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。