Question

在我最近的项目中，我有一个名为index.html的视图，其代码如下：

  <body>
      <header>
        <ul>
          <li><a th:href="@{/}" class="title">Loja</a></li>
          <li><a href="#">blablabla</a></li>
          <li><a href="#">blablabla</a></li>
          <li><a href="#">blablabla</a></li>
        </ul>
        <ul class="right">
          <li><a href="#" class="user"/>username</li>
          <li><a th:href="@{/admin}">admin</a></li>
          <li><a th:href="@{/logout}">logout</a></li>
        </ul>
      </header>
  </body>

标题的css样式是这样的：

header ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

header ul.right {
  float:right;
}

header li {
  float: left;
}

header li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: 'Oxygen Mono';
}

header li a:hover {
    background-color: #111;
}

header li.active {
    background-color: #4CAF50;
}

当我在浏览器中打开此页面时，右侧显示的项目将显示在另一行中（请参阅：https://jsfiddle.net/klebermo/ch6gtj3p/）。任何人都知道我可以在css中修改什么来修复它？

Answer 1

因为左侧菜单栏没有浮动。你应该添加：

header ul {
    float: left;
}

然后设置header标记的背景颜色：

header {
    background-color: #333;
    overflow: hidden;
}

Answer 2

我刚删除了display：block for header li a，它看起来是对齐的。

codepen URL供参考

http://codepen.io/nagasai/pen/vKOwxQ

                header li a {

            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-family: 'Oxygen Mono';
        }

希望这对你有所帮助

导航栏中的项目对齐方式

2 个答案: