Question

我一直在不停地搜索为什么我的窗口边框与简单菜单的第一项之间有一个额外的间距，用列表构建。我尝试了我能在网上找到的所有东西，但仍然有这个额外的间距......

有没有人有想法或建议？

HTML代码为：

<body>

<div class="indexblock">
        <div id="menu">

            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Tours</a></li>
                <li><a href="#">B2B</a></li>
                <li><a href="#">Scholen</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Nl/En</a></li>
            </ul>

        </div>
</div>



<div class="block">
    <div id="one">
        <div id="frame">            

<h1> dit is een titel </h1>
<p> dit is heel wat tekst dit is heel wat tekst dit is heel wat tekst 
dit is heel wat tekst dit is heel wat tekst dit is heel wat tekst dit is heel wat tekst 
dit is heel wat tekst dit is heel wat tekst dit is heel wat tekst dit is heel wat tekst 
dit is heel wat tekst dit is heel wat tekst dit is heel wat tekst </p>

<h1> Dit is een tussentitel </h1>

<p> dit is heel wat tekst dit is heel wat tekst dit is heel wat tekst 
dit is heel wat tekst dit is heel wat tekst dit is heel wat tekst dit is heel wat tekst 
dit is heel wat tekst dit is heel wat tekst dit is heel wat tekst dit is heel wat tekst 
dit is heel wat tekst dit is heel wat tekst dit is heel wat tekst </p>

<p class="filled"> Dit is een ondertittel </p>

        </div>
    </div>
</div>

css：

html, body
{
    padding: 0;
    margin: 0;
}
html
{
    height: 100%;
}

body
{
    padding: 0;
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
    position: relative;
    background: url(../img/background.jpg) fixed no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-family:"helvetica";
    font-color:#ff6633 !important;
}

#block{
    float:center;
    margin-top: 50px;
    margin-left: auto; 
    margin-right: auto;
    background:#fff;
    width:80%;
    display:block;
    opacity:0.9;
    position:relative;
    overflow:hidden;
    moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

#indexblock{
    float:center;
    margin-top: 50px;
    margin-left: auto; 
    margin-right: auto;
    width:80%;
    display:block;
    opacity:0.9;
    position:relative;
    overflow:hidden;
}

#menu {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 80%;
    display: table;
    overflow: hidden; 
    moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    opacity:0.9;
}
#menu li {
    display: inline;
    height: 25px;
    margin: 0;
    font-size: 18px;
}
#menu li:first-child {
    padding-left: 0px;
}
#menu li a {
    width: 80%;
    display: inline;
    height: 100%;
    padding: 10px; 
    margin: 0;
    line-height: 50px;
    text-decoration: none;
    background-color: #fff;
    font-weight: bold;
    color: #ff6633;
    moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    opacity:0.9;
    border-color:#ff6633;
    border-style:solid;
    border-width:3px;
    }

#menu li a:hover {
    background-color: #16375b;
    color: #fff;
    border-color:#fff;
}

Answer 1

默认情况下，<ul>标记（无序列表）上有边距和填充。

只需将以下代码添加到样式表中：

#menu ul {
    margin: 0;
    padding: 0;
}

希望这有帮助！

为什么窗口边框和列表（项目）之间有间距？

1 个答案: