Question

我的<ul> <li>标签出现了问题，我不确定问题是否真的存在于这些类中。

当我执行此代码时，“menu”div从父“header”div下推约10px。（奇怪的附加信息：当我在我的“菜单”div上放置边框时，它不会将其推下来）

以下是我的代码：

HTML CODE：

<div class="background"></div>
        <div class="page">
            <div class="header">
                <div class="headerLogo"><img src="images/logo.png" style="margin-top:42px;"></div>
            </div>

            <div class="menu">
                <div class="menuContainer">
                        <ul id="nav">
                            <li class="forside"><a href="?p=hjem">Forside</a></li>
                        </ul>
                </div>
            </div>

            <div class="content">
            </div>

            <div class="footer">
            </div>
        </div>

CSS代码：

html, body {
    height:100%; 
    margin:0; 
    padding:0;
}
img {
    border: none;
}
textarea{
    resize: none;
}

.background {
    position:fixed; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%;
    background-color: #e6e6e6;
    background-image: url('images/bg.png');
}

.page {
    position:relative; 
    z-index:1; 
}

.header {
    position:relative;
    height:192px;
    width: 100%;
    background: url(images/header.png) 0 0 repeat-x;
}

.headerLogo{
    position:relative;
    margin:0px auto;
    width:475px;
}

.menu {
    position:relative;
    height: 31px;
    width: 100%;
    background: url(images/menubg.png) 0 0 repeat-x;

}

.menuContainer {
    position:relative;
    width: 850px;
    margin:0px auto;
    height:25px;
}

.content {
    position:relative;
    width:850px;
    height: auto;
    margin: 0 auto;
    min-height:450px;
    background: url(images/content.png) 0 0 repeat-y;
}

.footer {
    position:relative;
    width: 100%;
    height: 141px;
    background: url(images/footer.png) 0 0 repeat-x;

}

// Menu
    ul#nav {
        list-style: none inside;
        }
        ul#nav li {
            display: inline;
            }
            ul#nav li a {
                display: block;
                height: 25px;
                text-indent: -9999px;
                float: left;
                }
                ul#nav li.forside  a{
                    width:80px;
                    background: url(images/menu/forside.png) top center no-repeat;
                    }               
                    ul#nav li a:hover {
                        background-position: bottom center;
                    }
                ul#nav li.forside2  a{
                width:80px;
                background: url(images/menu/forside.png) bottom center no-repeat;
                }

Answer 1

我认为您添加下面的样式，然后执行。

ul
{
margin:0px;
}

<ul>和<li>向下推<div> </div> </li> </ul>

1 个答案: