跨度和Div行为

时间:2014-01-27 06:28:12

标签: jquery html css

我有以下代码,我想将菜单栏(页面换行)与内容对齐。 下面代码2行用于星级评定并显示星星。

 <div id="content" float: left></div>
        <div id="default"></div>

完整代码:

Rate this Site <span id="test"> </span>
        <div id="content" float: left></div>
        <div id="default"></div>
        <span id="page-wrap">
        <span id="content">
            <ul id="nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">Products</a>
                    <ul class="child">
                        <li><a href="#">LCD LED TV</a></li>
                        <li><a href="#">Garments</a></li>
                        <li><a href="#">Watches</a></li>
                        <li><a href="#">Laptops</a></li>
                    </ul>
                </li>
                <li><a href="#">Services</a>
                    <ul class="child">
                        <li><a href="#">Repairs</a></li>
                        <li><a href="#">Installations</a></li>
                        <li><a href="#">Setups</a></li>
                    </ul>
                </li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </span>
    </span>

的style.css

a { color: black }

/* Targeting both first and second level menus */
#nav li { float: left; position: relative; }
#nav li a { background: ; border: ; color: #333; display: block; margin: 0 5px 0 0; padding: 5px 8px; text-decoration: underline }
#nav li a:hover { background:; text-decoration: BOLD; }

/* Targeting the first level menu */
#nav { display: block; height: 35px; padding: 10px 0; width: 500px; z-index: 100; position: absolute;}
#nav > li > a {  border-top-left-radius: 10px; border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px;}

/* Targeting the second level menu */
#nav li ul { background: ; border:; color: #333; display: none; margin: -3px 0 0 0; width: 200px; position: absolute; font-size:12px; }
#nav li ul li { width: 100% }
#nav li ul li a { background: none; border: none; line-height: 30px; margin: 0; padding: 0 0 0 5px;  }
#nav li ul li a:hover { background:  ; color:blue}

/* A class of current will be added via jQuery */
#nav li.current > a { background: ; }

/* CSS fallback */
#nav li:hover > ul.child { display: block; }

我希望我的菜单项与星形符号相同。

1 个答案:

答案 0 :(得分:0)

检查

http://jsfiddle.net/TY358/1/

为nav类添加了保证金:

margin-top:0px;

并减少了顶部填充