1. 首页
  2. 问答
  3. 学习部门的放置

学习部门的放置

2014-04-04 39 views
3

对所有单独的组件进行了大量的研究。但是，我不明白这些组件如何一起工作。几次安置问题在不同的场合困扰着我。我想明白为什么它的行为如此。学习部门的放置

设计一个带有固定标题的网站，其中包含一些按钮。我想把按钮放在彩色的行（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不在NAV之上？

来源

2014-04-04 RB84

回答

5

因为你broswer适用默认一定的余量给ul标签

尝试添加

ul { 
    margin: 0; 
}

您可以通过使用一个CSS复位避免这些问题（埃里克迈耶就是权威在这里：http://meyerweb.com/eric/tools/css/reset/）或Necolas'Normalize.css：http://necolas.github.io/normalize.css/

第一个将所有元​​素的所有值清零 - 您必须重新构建列表等一些元素的样式。

第二个规范化要素来解决浏览器的值不一致

来源

2014-04-04 15:44:20 Luca

1

添加到您的CSS：

ul{ 
    margin:0; 
    padding:0; 
}

这将清除UI元素

来源

2014-04-04 15:44:38 Manly

2

默认属性当使用元素UL它有时会在浏览器上创建空白。通过使margin为0px，您将删除空白，从而减少元素使用的区域。希望这可以帮助。下面的代码可用于...

ul { 
margin:0px 
}

来源

2014-04-04 15:47:25

+0

这是一个简短的要考虑的答案。如果你能详细说明这是如何解决OP的问题的话，它会阻止它被删除...... – sgress454

+0

对不起。当使用元素ul时，它有时会在浏览器上创建空白。通过使margin为0px，您将删除空白，从而减少元素使用的区域。希望这可以帮助。谢谢 –

+0

@IPADDRESS - 请**编辑**您的答案与额外的信息... –

2

当您使用“浮动”属性上的某些内容（这里的“LI”），父母（这里的“菜单”）忽视他的流动儿童来计算他的身高。

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

所以删除您

nav { 
    height:40px; 
}

，并添加你的CSS：

.menu { 
    overflow:auto; 
}

在本小提琴：http://jsfiddle.net/bE3QH/

来源

2014-04-04 15:52:35 Neekobus

1

你会好起来的，如果你没有指定宽度和列表项目的高度，而是将锚定标记显示为块，并给予那些宽度和高度。

来源

2014-04-04 16:01:01 lennon626

相关问题

 相关问题