导航栏和标签<ul> <li>

Question

关于标签“ ul”和“ li”，我仍然遇到一些困难

实际上，我想将导航栏水平放置，但不起作用。

我不知道我的问题在哪里？

查看结果

这是我的HTML块

<div id="container_menu">
            <ul id="topnav2">
                <li class="active2"><href="index.php">HOME</a></li>
                <li><a href="#">ABOUT US</a></li>
                <li><a href="#">INVESTEMENT PLAN</a></li>
                <li><a href="#">NEWS</a></li>
                <li><a href="#">FAQS</a></li>
                <li><a href="#">RULES</a></li>
                <li><a href="#">CONTACT US</a></li>
            </ul>
        </div>

这也是我的CSS

#container_menu {
  position: relative;
  margin-top: 30px;
  margin-right:65px;
  width: auto;
  float: right;
  text-align: center;

}

/* Le navigateur */ 

#topnav2 li {
  overflow: hidden;
  vertical-align: baseline;
  letter-spacing: normal;
  word-spacing: 0px;
  font-family: 'Open Sans', sans-serif;
  font-size: 13.333px;
  display: block;

}

/* Navbar links */

#topnav2 li a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;

}

#topnav2 li a:hover {
  background-color: white;
  color: black;
}

.active2 {
  background-color: #C52E1E;
  color: white;
}

你有个主意吗？ 非常感谢您的回答

致谢

Answer 1

移动浮动对象：向左移动；从“ ＃topnav2 li a ”到“ ＃topnav2 li ”。应该可以。

/* Le navigateur */ 

#topnav2 li {
    overflow: hidden;
    vertical-align: baseline;
    letter-spacing: normal;
    float: left;
    word-spacing: 0px;
    font-family: 'Open Sans', sans-serif;
    font-size: 13.333px;
    display: block;

}

/* Navbar links */

#topnav2 li a {
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;

}

Answer 2

如果您在inline-block中使用block而不是#topnav2 li，则可能会解决您的问题。

#topnav2 li {
  overflow: hidden;
  vertical-align: baseline;
  letter-spacing: normal;
  word-spacing: 0px;
  font-family: 'Open Sans', sans-serif;
  font-size: 13.333px;
  display: inline-block;
}