HTML/CSS 不向左移动

Question

* {
  margin: 0;
  padding: 0;
}


/* Formats the Navigation bar */

nav {
  width: 100%;
  height: 60px;
  background-color: #2a2a2a;
}


/* Formats the page title */

nav p {
  font-family: arial;
  color: #fff;
  font-size: 24px;
  line-height: 55px;
  float: left;
}


/* formats the navlinks to the left */

nav ul {
  float: left;
}


/* formats the navlinks to left */

nav ul li {
  float: left;
  list-style: none;
  position: relative;
}


/* formats the text in the list for nav bar */

nav ul li a {
  display: block;
  font-family: arial;
  color: #fff;
  font-size: 14px;
  padding: 22px 14px;
  text-decoration: none;
}


/* styles the drop down */

nav ul li ul {
  display: none;
  position: absolute;
  background-color: #2a2a2a;
  padding: 3px;
  border-radius: 0px 0px 3px 3px;
}


/* Displays when hovered */

nav ul li:hover ul {
  display: block;
}

nav ul li ul li {
  width: 180px;
  border-radius: 4px;
}

nav ul li ul li a {
  padding: 8px 14px;
}

nav ul li ul li a:hover {
  background-color: grey;
}

<nav>
  <ul>
    <li><a href="home.php">Home</a></li>
    <li><a href="#">Teams</a>
      <ul>
        <li><a href="">First</a></li>
        <li><a href="">Second</a></li>
        <li><a href="">Third</a></li>
        <li><a href="">Fourth</a></li>
      </ul>
    </li>
    <li><a href="aboutme.php">About me</a></li>
    <li><a href="">Contact</a></li>
  </ul>
</nav>

大家好，我似乎无法理解发生了什么。我已经尽我所能，但我可以让文本像默认的 html 一样向左对齐。我有一个如下所示的主页：

<?php include ("navBar.php") ?>
home

就是这样，由于某种原因，“主页”在页面的一半处结束，我在样式表的顶部包含了默认边距和填充，但它不起作用。任何帮助都将非常感谢。

Answer 1

我看到有一个 nav ul li 类，它有一个显示值块。尝试改为 inline-block 并查看它是否有效。