Question

我一直在尝试将项目集中在导航中，但没有这样的运气。每个解决方案都会将我的导航栏从horizontal navigation bar变为：vertical navigation bar。

非常感谢任何帮助！

带CSS代码的HTML：

＆＃13;

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  text-align: center;
}

li {

  float: left;   

}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 10px 10px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

＆＃13;

<html>
  <head>
  </head>
  <body>

    <ul>
      <li><a class="active" href="#home">Home</a></li>
      <li><a href="#news">News</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#about">About</a></li>
    </ul>

  </body>
</html>

＆＃13;

Answer 1

只需从li移除浮动并制作inline-block

即可

li {    
/* float: left;   */
display:inline-block;
}

居中的第一条规则是......＆＃34;不要使用花车＆＃34;

＆＃13;

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  text-align: center;
}
li {
  display: inline-block;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 10px 10px;
  text-decoration: none;
}
li a:hover {
  background-color: #111;
}

＆＃13;

<ul>
  <li><a class="active" href="#home">Home</a>
  </li>
  <li><a href="#news">News</a>
  </li>
  <li><a href="#contact">Contact</a>
  </li>
  <li><a href="#about">About</a>
  </li>
</ul>

＆＃13;

Answer 2

我使用float删除了 li 标记上的css并将其更改为显示和宽度：

li {
display: -webkit-inline-box;
width: 60px;

}

https://i.stack.imgur.com/LbYd4.png`

我希望这能帮助你@C。拉各斯

导航栏中的中心项目

2 个答案: