Question

我正试图将我的导航栏集中在一起，但遇到了一些困难，并且不知道如何继续。我的导航栏里面有一个类和一个div，这可能让我很困惑。我试图调整中心和浮动中心，但没有运气。

body {
  background-color: #000000;
}

div {
  min-height: 75px;
  line-height: 75px;
  text-align: center;
  color: #57df13;
  font-weight: bold;
  font-family: verdana, sans-serif;
}

.inner {
  width: 50%;
  max-width: 960px;
  margin: 0 auto;
}

.header .inner {
  font-size: 125%
}

.menu .inner ul {
  list-style-type: none;
}

.menu .inner li {
  float: left;
  padding-left: 18px;
  transition: all .3s ease-in-out;
}

.menu .inner li:hover {
  font-size: 150%;
}

<head>
  <title>PandaGamingNetwork</title>
  <link href="CSS/master.css" type="text/css" rel="stylesheet">
</head>

<body>
  <div class="header">
    <div class="inner">
      <h1> PandaGamingNetwork </h1>
    </div>
  </div>
  <div class="menu">
    <div class="inner">
      <ul>
        <li> Home </li>
        <li> About </li>
        <li> Vids </li>
        <li> Memes </li>
      </ul>
    </div>
  </div>
</body>

Answer 1

从.menu .inner li中删除float：left并使用display：inline-block;

.menu .inner li {
    /* float: left; */
    padding-left: 18px;
    transition: all .3s ease-in-out;
    display: inline-block;
}

Answer 2

删除您.inner规则中的所有内容并将其添加到菜单中心：

.inner {
  display: flex;
  justify-content: center;
}

并将padding: 0;添加到.menu .inner ul以避免因填充而导致的偏移。

body {
  background-color: #000000;
}

div {
  min-height: 75px;
  line-height: 75px;
  text-align: center;
  color: #57df13;
  font-weight: bold;
  font-family: verdana, sans-serif;
}

.inner {
  display: flex;
  justify-content: center;
}

.header .inner {
  font-size: 125%
}

.menu .inner ul {
  list-style-type: none;
  padding: 0;
}

.menu .inner li {
  float: left;
  padding-left: 18px;
  transition: all .3s ease-in-out;
}

.menu .inner li:hover {
  font-size: 150%;
}

<div class="header">
  <div class="inner">
    <h1> PandaGamingNetwork </h1>
  </div>
</div>
<div class="menu">
  <div class="inner">
    <ul>
      <li> Home </li>
      <li> About </li>
      <li> Vids </li>
      <li> Memes </li>
    </ul>
  </div>
</div>

中心菜单栏

2 个答案: