使用CSS定位元素的正确方法

您好我想将我的导航位置放在标题中我的站点名称旁边，但它证明很困难，我不得不使用position：absoutle和margin，但我必须进入减号以使其正确显示。使用CSS定位元素的正确方法

我想知道是否有更简单的方法使这些并排显示？

点击此处查看JSFiddle！

或查看下面我的代码：

的index.html

<header> 
<h1>iManage</h1> 
<nav> 
    <ul class="maina"> 
     <li><a href="Home">Home</a></li> 
     <li><a href="Projects">Projects</a></li> 
     <li><a href="Settings">Settings</a></li> 
    </ul> 
</nav> 
    </header>

的style.css

header { 
width:auto; 
height:50px; 
background-color:#374348; 
} 

header > h1 { 
font-size:16px; 
font-weight:bold; 
text-align:left; 
color:#FFF; 
padding:10px; 
} 


.maina > li { 
display:inline; 
list-style:none; 
} 

header > nav { 
text-align:center; 
width:300px; 
height:auto; 
border:medium #999; 
position:absoulte; 
top:0; 
margin: -50px 0px 0px 60px; 
}

来源

2013-08-28 001221

那么，这是这样做的正确的方式...

说明：您需要float您的h1到left ，nav元素也是如此，现在float会做什么？它将float您的元素设置为left，这将在浮动元素的右侧创建一个空白空间，这将为您的nav增加一些空间，并且使用.clear:after自行清除父元素，您可以使用overflow: hidden;太代替.clear:after（IE的Cuz会破坏这里你的游戏）...

您还可以阅读我的this答案，将解释一个概念使用clear: both;清除浮动元素，以及为什么需要清除它们。

Demo

header { 
    width:auto; /* You don't need this too */ 
    height:50px; 
    background-color:#374348; 
} 

header > h1 { 
    font-size:16px; 
    font-weight:bold; 
    float: left; 
    color:#FFF; 
    padding:10px; 
} 


.maina > li { 
    display:inline; 
    list-style:none; 
} 

header > nav { 
    width:300px; 
    height:auto; 
    border:medium #999; 
    float: left; 
    margin: 10px; 
} 

.clear:after { 
    content: ""; 
    display: table; 
    clear: both; 
}

提示：一般来说，你想对你的菜单项margin和padding，我想建议你使用display: inline-block;代替block，你也可以，如果你摆脱>真的不需要使用它。

最后但并非最不重要的，你正在使用header这是HTML5元素，所以一定要确保你使用的是HTML5重置样式表，这将宣布其他元素，如footer，aside，nav作为display: block;比方说HTML5 Doctor Stylesheet Reset

来源

2013-08-28 13:45:50

+1实际添加一些细节！ – Liam

哦，和吸烟的外星人..... – Liam

@Liam哈哈谢谢:) –

你可以使用float：left;为了更容易理解，请点击此处了解： http://www.w3schools.com/css/css_float.asp

来源

2013-08-28 13:46:03

更好的使用官方来源：http：///www.w3.org/TR/CSS2/visuren.html#propdef-float;我不喜欢w3schools乍一看它看起来如此官方，但它确实不是;） – DrCopyPaste

您可以设置'h1'和'nav'以显示：inline-block。

来源

2013-08-28 13:46:10 Tomzan

您有两个选择，首先您可以将H1和Nav元素都设置为float：left，但请记住清除：标题标签后面的元素。删除位置：绝对，顶部：0和保证金，你应该很好去。

让我知道你如何继续。 AJ

来源

2013-08-28 13:49:22

使用CSS定位元素的正确方法

回答

相关问题