Question

我是编码的新手。对不起，如果我的问题很天真。我试图将网站磁贴和导航定位在同一行。我尝试在标题和导航上使用inline:block，它似乎不起作用。我错过了什么？这是我的代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body {
    color: #000;
    width: 800px;
    margin: 0 auto;
}

</style>
</head>

<body>
<div id="wrap">
  <div id="menu">
    <div class="default-heading">
      <h1>Resume</h1>
    </div>
    <div class="menu"> <a href="#">Home</a> <a href="#" >Education</a> <a href="#">Skills</a> <a href="#">Experience</a> <a href="#">Contact</a></div>
    </div>
  </div>

</div>
</body>
</html>

Answer 1

.default-heading, .menu-container {
    display:inline-block;
}

在CSS中添加此项将解决您的问题。

Answer 2

有很多方法可以做到这一点。我个人更喜欢漂浮的div。

<div style="width:500px; background-color:#f5f5f5; border:solid 1px #cccccc; padding:5px;">
  <div style="float:left">My page title</div>
  <div style="float:right">Homepage | About | Contact</div>
  <div style="clear:both"></div>
</div>

预览

这只是另一种选择;）

如何使标题和导航栏出现在同一行？

2 个答案: