如何浮动菜单列表元素

Mrhill65 发表于 Dev

先生希尔65

我想让我的无序列表坐在我必须代表我的主页的div标签旁边。我不知道如何使它们彼此相邻设置。他们似乎有相同的身材，但我不知道该怎么做才能让他们正确地坐在彼此身边。

HTML

<!DOCTYPE html>
<html>
  <head>
    <title> Homepage </title>
    <link rel="stylesheet" type="text/css" href="site.css">
  </head>
  <body>
    <nav class="nav-bar">
      <div class="head-title"><a href="#">Homepage</a></div>
      <ul class="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">page 1</a></li>
        <li><a href="#">page 2</a></li>
        <li><a href="#">page 3</a></li>
      </ul>
    </nav>
  </body>
</html>

的CSS

html, body
{
    width:100%;
    height:100%;
    margin:0px;
}
.head-title{
    display:inline-block;
    float:left;
    padding:14px;
    padding-right:16px;
    background-color:green;
    margin:0px;
}
.menu ul
{
    display:inline-block;
    margin:0px;
}
.menu li
{
    display:inline-block;
    padding:14px;
    background-color:orange;
    margin:0px;
    float:left;
}
.nav-bar
{
    width:100%;
    height:10%;
    background-color:blue;
    margin-top:0px;
    float:left;
}

任何帮助或建议，不胜感激。

罗科·C·布尔扬（Roko C.Buljan）

应该ul.menu不是.menu ul

ul.menu
{
    display:inline-block;
    margin:0px;
    padding:0;     /* this might also help */
}

这是带有大量修复程序的扩展版本：

html, body{
  width:100%;
  height:100%;
  margin:0px;
}
.nav-bar{
  background-color:blue;
}
.head-title{
  padding:14px;
  padding-right:16px;
  background-color:green;
  float:left;
}
ul.menu{
  display: inline-block;
  vertical-align: top;
  margin:0;
  padding:0;
  list-style: none;
}
ul.menu li{
  background-color:orange;
  float:left;
}
ul.menu li a{
  display: block;
  padding: 14px;
}

<nav class="nav-bar">
  <div class="head-title"><a href="#">Homepage</a></div>
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">page 1</a></li>
    <li><a href="#">page 2</a></li>
    <li><a href="#">page 3</a></li>
  </ul>
</nav>

就像：