Css Study - Top Menu in Header 横向间隔的菜单

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

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