.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: #;
        }

        .header {
            width: %;
            height: 100px;
            line-height: 100px;
        }

        .shortcut {
            width: %;
            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: #;
        }

            a:hover {
                color: #E4393C;
                text-decoration: underline;
            }

        .fav {
            top: 8px;
            left: ;
            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="javascript:addToFavorite()" rel="nofollow">收藏我们</a></li>
                        <li><b class="add_home"></b><a href="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>

Css Study - Top Menu in Header 横向间隔的菜单的更多相关文章

  1. Css Study - 纵向Menu - By html and Css

    http://www.wikihow.com/Create-a-Dropdown-Menu-in-HTML-and-CSS HTML <div id="leftmenu"&g ...

  2. css study

    ---恢复内容开始--- html{filter:expression(document.execCommand("BackgroundImageCache",false,true ...

  3. DIV+CSS制作二级横向弹出菜单,略简单

    没有使用JavaScript控制二级菜单的显示,结果如上图所示. 代码如下: <!DOCTYPE html> <html> <head> <meta char ...

  4. 使用jquery获取css的top和left属性

    使用jquery获取css的top和left属性 因为left和top也都是普通的css属性所以可以使用如下代码来获取 var left = $('#test').css('left'); var t ...

  5. JS实现的简单横向伸展二级菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. javascript 横向下拉菜单演示

    <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"><head><me ...

  7. Css Study - 横向MENU

    http://cssmenumaker.com/menu/tabbed-chrome-and-blue HTML <div id="topMenu"> <ul&g ...

  8. 纯css实现横向下拉菜单

    自己最近在捣腾css代码,不光是js能做很多有趣的东西,这货也可以做很多东西,现在把自己的一些作品分享给大家. 做得有点粗糙,大家根据这个思路来,可以自己修改修改. 关于demo:这是一个横向下拉的菜 ...

  9. table 上下左右 4根线的写法 :before :after 他们就能把td里面右下的那颗线给盖上 还有body和header横向滚动的联动 || 不能把body套在header上是为了上header表头固定 || 还有表头header的右侧overflow-y 是否出现滚动条的位置 记得有一个$nextTick 要不然会获取不到高度 高度就为0了 || 横向滚动条纵向滚动条

    table 上下左右 4根线的写法 <!--* @description 重点查核人员表!--><template> <div class="keyChecke ...

随机推荐

  1. 搜索框js样式(通用型)

    HTML部分代码: -------------------------------------------------------------- <div class="search_ ...

  2. 最长递增子序列 O(NlogN)算法

    转自:点击打开链接 最长递增子序列,Longest Increasing Subsequence 下面我们简记为 LIS. 排序+LCS算法 以及 DP算法就忽略了,这两个太容易理解了. 假设存在一个 ...

  3. FK JavaScript之:ArcGIS JavaScript添加Graphic,地图界面却不显示

    使用ArcGIS JavaScript,往地图中添加几个Graphic,基本是与官网示例代码一致.绘制的图形一闪而过之后,就没了 核心代码如下: iniToolBar: function () { t ...

  4. linux笔记五-------编辑器

    1. 三种模式    命令(默认).尾行.编辑模式 2. 尾行模式    :    :q      退出vi编辑器    :w      保存修改    :wq     保存并退出编辑    :q!  ...

  5. centos 安装haproxy 1.6.3

    yum install libtermcap-devel ncurses-devel libevent-devel readline-devel gcc gcc-c++ pcre pcre-devel ...

  6. Struts基础详解

    1.web.xml配置: <filter> <filter-name>Struts2</filter-name> <filter-class> org. ...

  7. 关于Java擦除特性

    package thinkingInJava; /* * 模拟擦除 */ public class SimpleHolder { private Object obj ; public void se ...

  8. TP框架知识点

  9. nginx反向代理(proxy_pass)tomcat的过程中,session失效的问题解决

    Nginx反向代理tomcat,很是方便,但是也有些细节的问题需要注意:今天遇到了这样一个问题,tomcat中路径“host/web1”,nginx中直接“host/”代理,这时候session就无法 ...

  10. nginx https ssl 设置受信任证书[原创]

    1. 安装nginx 支持ssl模块 http://nginx.org/en/docs/configure.html yum -y install openssh openssh-devel (htt ...