Question

我正在创建一个触摸事件发生时显示的HTML导航菜单。

在打开/关闭菜单和菜单列表的按钮之间是一个我无法摆脱的差距，甚至可以解决它为什么会在那里！

奇怪的是（对我而言）如果我在包含块<div id="navContent"/>的菜单列表中添加1px边框，则间隙消失。

中将CSS和HTML问题的演示放入jsfiddle

#container {
    position:relative;
    top: 0px;
    width:100%;
    height:100%;
}
#mobileMenuBtn {
    display: block;
    position: relative;
    opacity: 0;
    width:290px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0px;
    background-color:#00F;
    height:23px;
}
#navContainer {
    display:block;
    position: absolute;
    top:95px;
    width:100%;
    height:auto;
}
#navContent {
    /*border:1px solid green;*/
    position:relative;
    top:0px;
    height:350px;
    width:290px;
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(51,102,204,0.8);
}
#navList {
    position:relative;
    top:30px;
    list-style-type: none;
    width:100%;
    margin-left: 30px;
    text-align: left;
    padding:0;
}
.navText {
    position: inherit;
    display: list-item;
    left:0px;
    font-family: Verdana, "Trebuchet MS", Arial;
    font-size: 1.1em;
    font-weight: normal;
    color: #FFF;
    margin-bottom:30px;
    outline: none;
    text-align: left;
}
nav a {
    text-decoration: none;
}


<div id="container">
    <nav id="navContainer">
        <div id="mobileMenuBtn" style="opacity: 1;"></div>
        <div id="navContent">
            <ul id="navList">
                <li><a class="navText selectDisable" id="navItem5" tabindex="0" data-name="home">home</a></li>
                <li><a class="navText selectDisable" id="navItem4" tabindex="1" data-name="solutions">solutions</a></li>
                <li><a class="navText selectDisable" id="navItem3" tabindex="2" data-name="experience">experience</a></li>
                <li><a class="navText selectDisable" id="navItem2" tabindex="3" data-name="equipment">equipment</a></li>
                <li><a class="navText selectDisable" id="navItem1" tabindex="4" data-name="training">training</a></li>
                <li><a class="navText selectDisable" id="navItem0" tabindex="5" data-name="contact">contact</a></li>
            </ul>
        </div>
    </nav>
</div>

我首先想知道为什么这个差距存在，因为我无法找到与之相关的保证金（我使用过Chrome和Safari开发者工具）。其次，如何最好地删除它（我假设（希望）没有应用于元素id＆＃34; navContent＆＃34;）的否定＆＃39; top＆＃39;值。

提前感谢您的帮助。

d

Answer 1

您忘了将ul默认样式清零：

#navList { margin-top: 0; }

祝你好运！

Answer 2

ul将保留默认的保证金值1em。你必须把它变为零。

试试这个

#navList{ 
   margin: 0; 
}

<强> DEMO

两个div之间的神秘空间

2 个答案: