Question

我正在网站上工作以获得一些经验，我遇到了这个元素的问题。我不确定发生了什么。在检查中，ID headerInner和类navLogo为1200 x 0像素。我想要做的是将所有这些链接和徽标放在一个框中，并将其置于标题中，但这是结果：

HTML：

<body>
<header>
    <div id="headerInner">
        <nav class="navLogo">
            <a href="#" id="menuIcon"></a>
            <ul>
                <li>
                    <a class="current" href="index.html">Home</a>
                </li>
                <li>
                    <a href="studio.html">Studio</a>
                </li>
                <li>
                    <a class="navLogo" href="index.html"><img 
                     src="img/navBanner.png"></a>
                </li>
                <li>
                    <a href="live.html">Live</a>
                </li>
                <li>
                    <a href="contact.html">Contact</a>
                </li>
            </ul>
        </nav>
    </div>
</header>

CSS：

header {
  margin: 0 auto;
  border-bottom-right-radius: 50px;
  border-bottom-left-radius: 50px; 
  background-color: #a30101;
  width: 95%;
  height: 86px;
}

#headerInner {
  max-width: 1200px;
  margin: 0 auto;
}

#logo {
  margin: 20px;
  float: left;
  width: 200px;
  height: 60px;
  background: url(img/logo.png) no-repeat center;
}

nav {
  margin: 0 auto;
  padding: 0;
}

.navLogo {
  margin: 0 auto;
}

#menuIcon {
  display: hidden;
  width: 40px;
  height: 40px;
  background: url(img/nav.png) center;
}

a:hover#menuIcon {
  border-radius: 4px 4px 0 0;
}

ul {
  list-style-type: none;
}

nav ul li {
  font-family: 'Alegreya', sans-serif;
  font-size: 150%;
  display: inline-block;
  float: left;
  padding: 10px;
}

Answer 1

将 ul 放在 div.menu-container 中，如下所示

<div class="menu-container">
  <ul>
   [...]
 </ul>
</div>

然后设计它

.menu-container {
 text-align: center;
}

ul {
 display: inline-block;
 margin: 0;
 padding: 0;
}

将此nav元素集中在标题中时出现问题

1 个答案: