Question

您好我想将我的导航位置放在标题中我的网站名称旁边，但事实证明这很困难，我不得不使用位置：absoutle和margin，但我必须进入减号以使其出现正确。

我想知道是否有更简单的方法让它们并排出现？

点击此处查看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;
}

Answer 1

嗯，这是正确的方法......

说明：您需要float h1 left nav，同样适用于float元素，现在float会做什么？它会left你的元素到nav，这将在浮动元素的右边创建一个空的空间，这将为你的.clear:after腾出一些空间，而不是使用overflow: hidden;自我清除父元素，您也可以使用.clear:after而不是clear: both;（因为IE会破坏您的游戏）...

您还可以阅读我的this回答，它将向您解释使用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; }清除浮动元素的概念以及清除它们的原因。

Demo

margin

提示：一般情况下，您希望在菜单项上添加padding和display: inline-block;，我建议您使用block代替>。如果你真的不需要使用它，可以摆脱header。

最后但并非最不重要的是，您使用的是footer HTML5元素，因此请确保您使用的是HTML5重置样式表，该样式表将声明其他元素，例如aside，nav， display: block;为{{1}}，例如HTML5 Doctor Stylesheet Reset

Answer 2

你可以使用float：left;为了更容易，在这里了解这一点： http://www.w3schools.com/css/css_float.asp

Answer 3

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

Answer 4

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

让我知道你是怎么过的。 AJ

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

4 个答案: