问在css中使用浮动时意外的10 in边距
EN

Stack Overflow用户

提问于 2017-03-10 05:18:22

回答 1查看 87关注 0票数 1

我遇到了在CSS中使用属性"float“的问题。在页面顶部出现10 On边距。怎么修呢？

PS.Adding空div到带有id="background1“的父div不起作用--我还读过本文https://css-tricks.com/all-about-floats/，但不知道如何应用这些技术来清除浮动

body{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
#background1 {
    background: #F6F7FB;
    width: 100%;
    height: 527px;
    padding:0;
    position: relative;
}

/*Header menu*/

#background1 li {
    list-style-type: none;
    display:inline;
}
#background1 li a {
    font-family: HalisGR-Medium;
    font-size: 20px;
    color: #3B3B3B;
    text-decoration: none;
    float: right;
    margin-left: 52px;
    margin-top: 24px;
}
#navmenu {
    margin-right: 72px;
}
/*Header menu ends*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!--Header menu-->
    <div id="background1" style="clear: both">
       <div style="clear: both;"></div>
           <section id="navmenu">
               <ul>
                   <li><a href="#">Projects</a></li>
                   <li><a href="#">Bio</a></li>
                   <li><a href="#">Contact</a></li>
               </ul>
           </section>
    </div>
    
</body>
</html>

css

css-float

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-03-10 05:20:36

不是因为漂浮的孩子。只需将margin:0;应用于ul即可。margin-top是在父进程之外崩溃和显示的内容。

body{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
#background1 {
    background: #F6F7FB;
    width: 100%;
    height: 527px;
    padding:0;
    position: relative;
}

/*Header menu*/

#background1 li {
    list-style-type: none;
    display:inline;
}
#background1 li a {
    font-family: HalisGR-Medium;
    font-size: 20px;
    color: #3B3B3B;
    text-decoration: none;
    float: right;
    margin-left: 52px;
    margin-top: 24px;
}
#navmenu {
    margin-right: 72px;
}
#navmenu ul {
  margin: 0;
}
/*Header menu ends*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!--Header menu-->
    <div id="background1" style="clear: both">
       <div style="clear: both;"></div>
           <section id="navmenu">
               <ul>
                   <li><a href="#">Projects</a></li>
                   <li><a href="#">Bio</a></li>
                   <li><a href="#">Contact</a></li>
               </ul>
           </section>
    </div>
    
</body>
</html>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42710774

复制

相似问题

问在css中使用浮动时意外的10 in边距
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在css中使用浮动时意外的10 in边距EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在css中使用浮动时意外的10 in边距
EN