Question

为什么ul有余量？当我向左或向右浮动时，导航栏直接位于标题的下方和标题之外。如果我删除Ul它不会掉到下面。我不明白。我该如何解决？

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   <div id="container">
       <div id="header">
           <div class="navbar">
               <ul>
               <li><a href="#"></a>NAV1</li>
               <li><a href="#"></a>NAV2</li>
               <li><a href="#"></a>NAV3</li>
               </ul>
           </div>
       </div>

   </div>

</body>
</html>

CSS

html{
    height:100%;
}
body{
    height:100%;
    width:100%;
    background-color: grey;
    margin:0;
    padding:0;
}
#container{
    width:80%;
    margin:auto;
}
#header{
    width:100%;
}
.navbar{
    width:100%;

}
ul{
    margin:0;
    padding:0;
    width:25%;
    float:left
}
li{
    display:inline;
}

Answer 1

UL上没有边距，它只是在容器内部显示，它上面有margin: auto，它将页面上的#container元素居中，宽度为80％。

如果您希望导航器悬浮在主体的左侧，请将导航器移出容器，或使用：

position: absolute;
left: 0;
width: 100%;

而不是浮动它，它将移到最近的相对容器的左侧（在这种情况下，正文为position: relative没有设置。

编辑：此外，您的链接结构不正确：

<li><a href="#"></a>NAV1</li>

如果您希望NAV1成为链接的文本

，则应为：<li><a href="#">NAV1</a></li>

Answer 2

这不是保证金，因为没有保证金，没有足够的空间。我不确定你想要实现什么，但你可以从ul。

中删除width: 25%;

Answer 3

试试这种方式。

＆＃13;

html{
    height:100%;
}
body{
    height:100%;
    width:100%;
    background-color: grey;
    margin:0;
    padding:0;
}
#container{
    width:80%;
    margin:auto;
}
#header{
    width:100%;
}
.navbar{
    width:100%;
    overflow: auto;
}
ul{
    margin:0;
    padding:0;
    width:100%;
    float:left;
}
li{
    display:inline;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
   <div id="container">
       <div id="header">
           <div class="navbar">
               <ul>
               <li><a href="#"></a>NAV1</li>
               <li><a href="#"></a>NAV2</li>
               <li><a href="#"></a>NAV3</li>
               </ul>
           </div>
       </div>

   </div>

</body>
</html>

＆＃13;

UL中不需要的保证金

3 个答案: