特色栏目： python 批处理 net编程 Javascript Php Asp Css Html5 Android seo centos

css – 学习Div安置

来源：互联网收集：自由互联发布时间：2021-06-13

对所有单独的组件进行了大量研究.但是,我不明白组件如何协同工作.几个安置问题在不同的场合困扰着我.我想了解为什么它的行为像它一样. 设计具有固定标题的网站,其中包含一些按钮

对所有单独的组件进行了大量研究.但是,我不明白组件如何协同工作.几个安置问题在不同的场合困扰着我.我想了解为什么它的行为像它一样.

设计具有固定标题的网站,其中包含一些按钮.我希望按钮放在彩色行(NAV)上.这就是为什么我做了NAV的孩子.但是我似乎无法将按钮放在栏上.

HTML

<body>
<nav class="row">
    <ul class="menu">
        <li id="link1"><a href="#link1">Link 1</a></li>
        <li id="link2"><a href="#link2">Link 2</a></li>
        <li id="link3"><a href="#link3">Link 3</a></li>
        <li id="link4"><a href="#link4">Link 4</a></li>
        <li id="link5"><a href="#link5">Link 5</a></li>
    </ul>
</nav>
<div class="row main">
    @RenderBody()
</div>

CSS

nav, div, li {
        -moz-box-sizing: content-box;
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
        border: 1px dashed black;
    }

    .row {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }

    nav {
        position: fixed;
        top: 80px;
        height: 40px;
        z-index: 100;
        background-color: Green;
        border-bottom: solid greenyellow 2px;
    }

    .menu li {
        display: block;
        background-color: darkgreen;
        float: left;
        height: 40px;
        width: 60px;
    }

    .menu a {
        color: white;
    }

结果

它可以通过几个方面来修复,例如按钮边距或相对于负顶部偏移放置按钮.然而,这些解决方案感觉“脏”,就像它不是正确的方法.为什么LI不在资产净值之上？

因为你的broswer默认适用于ul标签

尝试添加

ul {
    margin: 0;
}

你可以通过使用css reset来避免这些问题(Eric Meyer是这里的权威：http://meyerweb.com/eric/tools/css/reset/)或Necolas’Regrationize.css：http://necolas.github.io/normalize.css/

第一个将所有元素的所有值都归零 – 你必须重建像列表这样的元素的样式.

第二个规范化元素的值以修复浏览器的不一致性

上一篇：moodle没有显示CSS和主题与Linux服务器
下一篇：如何使用CSS或HTML粗体化特定的HTML行和列？

css – 学习Div安置

相关文章