Question

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

设计具有固定标题的网站，其中包含一些按钮。我希望按钮放在彩色行（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;
    }

结果 enter image description here

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

Answer 1

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

尝试添加

ul {
    margin: 0;
}

你可以通过使用css重置来避免这些问题（Eric Meyer是这里的权威：http://meyerweb.com/eric/tools/css/reset/）或Necolas'Renormalize.css：http://necolas.github.io/normalize.css/

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

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

Answer 2

使用元素ul时，有时会在浏览器上创建空格。通过使边距为0px，您将删除空白，从而减少元素使用的区域。希望这可以帮助。可以使用以下代码......

 ul {
 margin:0px
 }

Answer 3

当你在某些元素（这里是“LI”）上使用“float”属性时，父级（这里是“菜单”）会忽略他的浮动孩子来计算他的身高。

所以你必须为你的菜单指定一个有效的高度，或者更好的是，在它上面使用“overflow：auto”来记住他的孩子。

所以删除你的

nav {
    height:40px;
}

并添加CSS：

.menu {
    overflow:auto;
}

就像这个小提琴一样：http://jsfiddle.net/bE3QH/

Answer 4

您可以使用此代替代码。您将在本网站上获得现成的菜单控制。您可以根据需要进行修改。您将立即获得菜单控件。这是链接。

http://cssmenumaker.com

http://tympanus.net/codrops/2010/07/16/slide-down-box-menu/

http://cssmenumaker.com/builder/1666948

请检查出来。这些非常有用，它肯定会节省你的时间。

我希望这能解决您的问题。

Answer 5

将此添加到您的CSS：

ul{
  margin:0;
  padding:0;
}

这将清除ul元素的默认属性

Answer 6

如果没有为列表项指定宽度和高度，而是将锚标记显示为块，并给那些一个宽度和高度，那么你会更好。

学习Div安置

6 个答案: