无法使导航水平

Question

我多年来一直在研究这个问题，我正在尝试一下阳光下的一切，试图弄清楚如何使这个导航栏水平我以前做过它因为我从一个旧的网站上复制并粘贴了这个我已经完成的但它似乎没有起作用。我究竟做错了什么？我已经完成浮动到左侧显示内联所有的东西。我有可能有一些可以超越它的东西吗？ PS。我在Dreamweaver中工作并使用一些引导编码，如果有帮助的话。

<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%; 
}

＆＃13;

＆＃13;

/*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;
}

＆＃13;

<!--- 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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你的ul很小。这就是它将它压在一起的原因。尝试

ul.nav.navbar-nav {
    width:100%;
}

Answer 3

1. 外部容器.navbar-nav的样式为20％宽度。这迫使内部元素包裹，因为没有足够的空间。此处不需要100％的宽度，因为<nav>是一个块元素。

2. 如果您只有4个内部元素，则可以将width of 25%与floating left结合使用，将它们叠加在一起。

3. 将clearfix class或overflow:hidden（快速且脏！）添加到外部容器中，以确保它可视地包裹内部元素。

4. 请参阅我的更新代码段以供参考：

＆＃13;
＆＃13;
/*Nav Formatting*/

.navbar-nav {
}

.navbar-nav li {
  width: 25%;
  float: left;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}

.navbar-nav .nav > ul {
  float: right; 
  display: inline;
  margin: 0;
}


/*Nav Formatting: Hover animation*/

.navbar-nav li {
  position: relative;
}

.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;
}
＆＃13;
<!--- 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>
＆＃13;
＆＃13;
＆＃13;

Answer 4

/*Nav Formatting*/

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

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

.navbar-nav .nav > ul {
  float: right;
}


/*Nav Formatting: Hover animation*/

.navbar-nav li {
  position: relative;
  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>