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

嗨，我想在标题中将我的导航定位在我的站点名称旁边，但事实证明这很困难，我不得不使用position:absolute和margins，但我必须输入负数才能正确显示

我想知道是否有一个更简单的方法使这些并排出现

点击这里查看

或者在下面查看我的代码：

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>

---

好吧，这是正确的方法

说明：您需要将

float

您的

h1

放在

左侧

，

nav

元素也是如此，现在

float

将做什么？它将

浮动

您的元素到

左侧

，这将在浮动元素的右侧创建一个空白，这将为您的

导航

腾出一些空间，然后我使用

。清除：在

自清除父元素后，您可以使用

溢出：隐藏太多而不是
。清除：在
之后（因为IE会破坏你的游戏）

您也可以阅读我的答案，它将解释您使用
clear清除浮动元素的概念：两者以及为什么需要清除它们


提示：通常您希望在菜单项上有
margin
和
padding
，我建议您使用
display:inline block
而不是
block
，如果你真的不需要使用它，你也可以去掉


最后但并非最不重要的一点是，您使用的是HTML5元素
标题，因此请确保您使用的是HTML5重置样式表，它将声明其他元素，如
页脚
，
旁白
，
导航
作为
显示：块比如说
好吧，这是正确的方法

说明：您需要将
float
您的
h1
放在
左侧
，
nav
元素也是如此，现在
float
将做什么？它将
浮动
您的元素到
左侧
，这将在浮动元素的右侧创建一个空白，这将为您的
导航
腾出一些空间，然后我使用
。清除：在
自清除父元素后，您可以使用
溢出：隐藏太多而不是
。清除：在
之后（因为IE会破坏你的游戏）

您也可以阅读我的答案，它将解释您使用
clear清除浮动元素的概念：两者以及为什么需要清除它们


提示：通常您希望在菜单项上有
margin
和
padding
，我建议您使用
display:inline block
而不是
block
，如果你真的不需要使用它，你也可以去掉


最后但并非最不重要的一点是，您使用的是HTML5元素
标题，因此请确保您使用的是HTML5重置样式表，它将声明其他元素，如
页脚
，
旁白
，
导航
作为
显示：块比如说
你可以使用float:left；要使此操作更简单，请在此处了解：
您可以使用float:left；要使此操作更简单，请在此处了解：
您可以将“h1”和“nav”都设置为显示：内联块。
您可以将“h1”和“nav”都设置为显示：内联块。
您有两个选项，首先您可以将h1和nav元素都设置为浮动：左，但请记住清除：标题标记后面的元素上的两个。去掉位置：绝对，顶部：0和边距，你就可以走了

让我知道你进展如何。
AJ
您有两个选项，首先您可以将H1和Nav元素都设置为浮动：左，但请记住清除：标题标记后面的元素上的两个。去掉位置：绝对，顶部：0和边距，你就可以走了

让我知道你进展如何。
AJ
谢谢，太好了！将在7分钟内接受答案不会让我现在就做，但同时+1将获得一个很棒的答案@Alienthanks先生，太好了！将在7分钟内接受答案不会让我现在就做，但同时+1对于一个伟大的答案@Mr.Alienbetter使用官方来源：；我不喜欢W3学校，因为乍一看，它看起来很正式，但事实并非如此；）更好地使用官方来源：；我不喜欢W3学校，因为乍一看，它看起来很正式，但事实并非如此；）
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;
}

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;
}