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

就这样，由于某种原因，“ home”最终出现在页面的一半处，我在样式表的顶部添加了默认的边距和填充，但无法正常工作。任何帮助将非常感谢。

Answer 1

我看到有一个导航类，它有一个显示值块。尝试改为内联阻止，然后查看是否可行。

HTML / CSS不向左移动

1 个答案: