html - 无法使导航水平

Question

我已经为此工作了很长时间，我正在尝试一切，试图弄清楚如何使这个导航栏水平我以前做过，因为我从一个旧网站复制并粘贴了这个我已经完成了但它似乎没有用。我究竟做错了什么？我完成了向左浮动显示内联所有这些东西。我有可能压倒它吗？附言。我在 Dreamweaver 工作，如果有帮助，我会使用一些 Bootstrap 编码。

<nav class="navbar" role="navigation">
   <ul class="nav navbar-nav">
      <li><a href="#">home</a></li>
      <li><a href="#">menu</a></li>
      <li><a href="#">about</a></li>
      <li><a href="#">webshop</a></li>
   </ul> 
 </nav> 

/导航格式/

.navbar-nav {
  width: 20%;
text-align: center;
}

.navbar-nav > li {
  float: right;
  display: inline-block;
}
.navbar-nav .nav > lu {
  float: right;
  display: inline;
}

/导航格式:悬停动画/

.navbar-nav li {
  position: relative;
  float: left;
  margin: 0 20px;
}

.navbar-nav li:before {
  content: '';
  display: inline;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 2px;
  height: 0;
  background-color: #ABE1DB;
  -webkit-transition: height 0.4s ease 0.4s;
  transition: height 0.4s ease 0.4s;
}

.navbar-nav li:after {
  content: '';
  display: inline;
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 0;
  background-color: #ABE1DB;
  -webkit-transition: height 0.4s ease 0.4s;
  transition: height 0.4s ease 0.4s;
}

.navbar-nav li:hover:before, li:hover:after {
  height: 100%;
}

.navbar-nav li:hover a {
  background-color: transparent;
  -webkit-transition: background-color 0.4s ease 0.4s;
  transition: background-color 0.4s ease 0.4s;
}

.navbar-nav li:hover a:before, li:hover a:after {
  width: 100%;
}

.navbar-nav a {
  display: inline;
  padding: 0 40px;
  height: 100%;
  font-weight:normal;
  font-size: 18px;
  line-height: 60px;
  color: #ABE1DB;
  text-decoration: none;
  -webkit-transition: background-color 0.4s ease;
  transition: background-color 0.4s ease;
}
.navbar-nav a:before {
  content: '';
  display: inline;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #ABE1DB;
  -webkit-transition: width 0.4s ease;
  transition: width 0.4s ease;
}

.navbar-nav a:after {
  content: '';
  display: inline;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 2px;
  background-color: #ABE1DB;
  -webkit-transition: width 0.4s ease;
  transition: width 0.4s ease;
}

Answer 1

你已经设置了

.navbar-nav{
     width: 20%; 
}

如何扩展？尝试

.navbar-nav {
    width: 100%; 
}

/*Nav Formatting*/

.navbar-nav {
  width: 100%;
  text-align: center;
}

.navbar-nav>li {
  float: right;
  display: inline-block;
}

.navbar-nav .nav>lu {
  float: right;
  display: inline;
}


/*Nav Formatting: Hover animation*/

.navbar-nav li {
  position: relative;
  float: left;
  margin: 0 20px;
}

.navbar-nav li:before {
  content: '';
  display: inline;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 2px;
  height: 0;
  background-color: #ABE1DB;
  -webkit-transition: height 0.4s ease 0.4s;
  transition: height 0.4s ease 0.4s;
}

.navbar-nav li:after {
  content: '';
  display: inline;
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 0;
  background-color: #ABE1DB;
  -webkit-transition: height 0.4s ease 0.4s;
  transition: height 0.4s ease 0.4s;
}

.navbar-nav li:hover:before,
li:hover:after {
  height: 100%;
}

.navbar-nav li:hover a {
  background-color: transparent;
  -webkit-transition: background-color 0.4s ease 0.4s;
  transition: background-color 0.4s ease 0.4s;
}

.navbar-nav li:hover a:before,
li:hover a:after {
  width: 100%;
}

.navbar-nav a {
  display: inline;
  padding: 0 40px;
  height: 100%;
  font-weight: normal;
  font-size: 18px;
  line-height: 60px;
  color: #ABE1DB;
  text-decoration: none;
  -webkit-transition: background-color 0.4s ease;
  transition: background-color 0.4s ease;
}

.navbar-nav a:before {
  content: '';
  display: inline;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #ABE1DB;
  -webkit-transition: width 0.4s ease;
  transition: width 0.4s ease;
}

.navbar-nav a:after {
  content: '';
  display: inline;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 2px;
  background-color: #ABE1DB;
  -webkit-transition: width 0.4s ease;
  transition: width 0.4s ease;
}

<!--- Navbar --->

<nav class="navbar" role="navigation">
  <ul class="nav navbar-nav">
    <li><a href="#">home</a></li>
    <li><a href="#">menu</a></li>
    <li><a href="#">about</a></li>
    <li><a href="#">webshop</a></li>
  </ul>
</nav>