个人中心
gpt4 book ai didi

html - 导航栏不会显示在网页的中心

转载 作者：太空宇宙 更新时间：2023-11-04 08:58:35 24 4
gpt4 key购买 nike

所以我的问题是我的导航栏不会显示在屏幕中央(水平)，我不明白为什么，这是我经常遇到的问题，所以如果你能提供帮助，我将不胜感激。这是代码的链接

body {
  width: 100%;
  margin: 0;
  padding: 0;
}

/*******************
HEADER
*******************/
#logo {
  display: block;
  margin: 0 auto;
  height: 14em;
}

#name {
  text-align: center;
}

/*******************
NAV BAR
*******************/

nav ul {
  list-style-type: none;
  overflow: hidden;
  text-align: center;
}

nav li {
  float: left;
  display: inline-block;
}

nav li a {
  display: block;
  text-align: center;
  text-decoration: none;
}
  <body>
    <header>
      <img id="logo" src="img/under-construction.png" />
      <h1 id="name">Team Kangoo Anywhere</h1>
      <nav>
        <ul>
          <li><a href="home.html"></a>Home</li>
          <li><a href="about-us.html"></a>About Us</li>
          <li><a href="about-the-rally.html"></a>About The Rally</li>
          <li><a href="our-car.html"></a>Our Car</li>
          <li><a href="charities.html"></a>Charities</li>
          <li><a href="sponsors.html"></a>Sponsors</li>
          <li><a href="contact-us.html"></a>Contact Us</li>
        </ul>
      </nav>
    </header>

最佳答案

理想情况下，您应该有一些 header CSS 来将其内容居中，然后您可以按您想要的任何方式对齐 nav li 。我创建了一个 fiddle (与片段相同)来演示，并向 li 元素添加填充(否则它们会被压在一起)

希望这对您有所帮助。

body {
  width: 100%;
  margin: 0;
  padding: 0;
}


/*******************
HEADER
*******************/

header {
  display: block;
  margin: 0 auto max-height: 20em;
}

#logo {
  display: block;
  margin:auto;
  height: 14em;
}

#name {
  text-align: center;
}


/*******************
NAV BAR
*******************/
/*nav{text-align:center;}*/
nav ul {
  list-style-type: none;
  overflow: hidden;
  text-align: center;
}

nav li {
  float: left;
  display: inline-block;
  padding-right: 7px;
}

nav li a {
  display: block;
  text-align: center;
  text-decoration: none;
}
<header>
  <img id="logo" src="img/under-construction.png" />
  <h1 id="name">Team Kangoo Anywhere</h1>
  <nav>
    <ul>
      <li>
        <a href="home.html"></a>Home</li>
      <li>
        <a href="about-us.html"></a>About Us</li>
      <li>
        <a href="about-the-rally.html"></a>About The Rally</li>
      <li>
        <a href="our-car.html"></a>Our Car</li>
      <li>
        <a href="charities.html"></a>Charities</li>
      <li>
        <a href="sponsors.html"></a>Sponsors</li>
      <li>
        <a href="contact-us.html"></a>Contact Us</li>
    </ul>
  </nav>
</header>

关于html - 导航栏不会显示在网页的中心，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42938119/

24 4 0
文章推荐： css - 如何将 SharePoint 2013 Logo 放在菜单上方？
文章推荐： linux - 返工查找命令以使用其他扩展
文章推荐： css - 在基于 Zurb Foundation 5 的页面上调整垂直高度/空间？
文章推荐： java - 使用 Java 在 MAC OSX 和 Linux 中目录中的文件和目录列表