Question

我想把我的无序列表放在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;
}

感谢任何帮助或建议。

Answer 1

应该是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>

像是：

永远不要在菜单LI中添加填充。另外调整内部a的样式。
对浮动元素的内联块没有意义
等...

http://jsbin.com/xifati/1/edit?html,css,output

如何浮动菜单列表元素

1 个答案: