Question

我正在尝试将导航栏放在中心位置，但到目前为止我尝试过的每种方式都会导致导航栏不居中或者居中但链接不在一行中。我还希望将徽标与导航栏保持一致但向左浮动。我尝试添加容器类和导航ID，但我认为没有做任何事情。请帮助！

这是我的HTML：

<DOCTYPE html!>
  <html>
  <head>
    <link rel="stylesheet" type="text/css" href="HCstyle.css">
    <title>Hockey Corner</title>
  </head>
  <body>
    <div>
      <img class="logo" src="images/Hockey Corner logo real png.png" alt="Hockey Corner logo">
    </div>
    <div class="container">
      <div id="nav">
        <div class="wrap">
          <ul>
            <li><a href="link.html">Our Sponsers</a></li>
            <li><a href="link.html">Contact Us</a></li>
            <li><a href="link.html">About Us</a></li>
            <li><a href="home.html">Home</a></li>
          </ul>
        </div>
      </div>
    </div>
  </body>
  </html>

这是我的css：

img.logo{
  float:left;
  width:10%;
  padding-left:5%;
}
ul{
  list-style-type:none;
  margin:0;
  padding-left:20px;
  padding-right:20px;
  display:inline-block;
  overflow:hidden;
  float:right;
}
li{
  display:inline-block;
}
li a{
  display:block;
  color:white;
  text-align:center;
  padding:14px 16px;
  text-decoration:none;
}
li a:hover{
  background-color:#34495E;
}
body{
  background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url("images/Background1.jpg");
  background-size:cover;
  background-repeat:no-repeat;
}
.nav{
  float:left;
  text-align:left;
}
.container{
  text-align:center
}

Answer 1

使用flex属性可以解决您的问题。了解详情here。

工作代码：https://codepen.io/Sahero/pen/rzmVjN

Answer 2

您应该将CSS代码.nav更改为#nav。

有很多方法可以找到您的徽标。

我想推荐display：flex。

你可以找到关于flex的简单方法。

需要帮助将带有徽标内联的导航栏居中

2 个答案: