如何制作水平導航欄

Question

我正在嘗試制作一個水平導航欄，其中一些項目向左拉，其他項目則向右拉。 當我嘗試使用此代碼執行此操作時，將所有項目放在屏幕的左上角可以有人幫忙嗎？

 .nav li { display: inline; } 

 <div class="nav"> <div class="container"> <ul class="pull-left"> <li><a href="#">Home</a></li> <li><a href="#">How to</a></li> </ul> <ul class="pull-right"> <li><a href="#">Sign Up</a></li> <li><a href="#">Log In</a></li> <li><a href="#">Help</a></li> </ul> </div> </div> 

Answer 1

您可以嘗試的另一種方法是將兩個邊放在各個分區中，並且每個方法都顯示為內聯塊。 然后使用邊距拆分它們。 根據您的偏好設置面向外邊距，將面向邊緣設置為“自動”，它自然會將其測量出來。 所以它會是這樣的：

<div class="nav">
  <div class="container pull-left">
    <ul class="#">
      <li><a href="#">Home</a></li>
      <li><a href="#">How to</a></li>
    </ul>
  </div>
  <div class="container pull-right">
    <ul class="#">
      <li><a href="#">Sign Up</a></li>
      <li><a href="#">Log In</a></li>
      <li><a href="#">Help</a></li>
    </ul>
  </div>
</div>

我已經給了它每個自己的容器並將pull動作（和類）放在div而不是列表中;

.nav {
    display: block;
    /*^This would be default^*/
    width: 100%
}

.pull-left {
    display: inline-block;
    margin: Apx auto Apx Bpx;
}

.pull-right {
    display: inline-block;
    margin: Apx Bpx Apx auto;
}

我比定位列表更喜歡這個，因為他們過去給了我一些問題; 這也不需要浮動，這不會轉換為舊的瀏覽器，我被告知，雖然我永遠不會測試這樣的自己。

此外，使用此方法時，我建議您從一開始就設置它：

.body * {
  font-size: 0px;
}

.text { /*Class all CONTAINERS of
          text items this, just one
          level up, but not the
          text itself */
  font-size: 14px;
 }

這將消除任何空白問題，因為我已經發生在我身上（通常這將是左傾的一側被空的空間推下，而右側將被推高相同的數量，但從在底部，所以它們不會是水平的。這樣，這些空間是0px而已。只是一個建議。

Answer 2

您似乎正在使用Bootstrap ，當您忘記添加引導鏈接時會出現此問題。

引導鏈接

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

添加這個可以解決您的定位問題。

 .nav li { display: inline; } 

 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <div class="nav"> <div class="container"> <ul class="pull-left"> <li><a href="#">Home</a></li> <li><a href="#">How to</a></li> </ul> <ul class="pull-right"> <li><a href="#">Sign Up</a></li> <li><a href="#">Log In</a></li> <li><a href="#">Help</a></li> </ul> </div> </div> 

---

Alternitavely

您也可以定義pull-left和pull-right在您的自定義CSS文件，如下所示：

.nav li {
    display: inline;
}
.pull-left { 
    float: left; 
}
.pull-right { 
    float: right; 
}

這也將解決問題。

希望這可以幫助！

Answer 3

您已為左拉和右拉類設置浮點屬性。 還要在ul.pull-right之后添加一個div來清除浮點數，這樣ul.pull-right之后的元素就不會浮動。

看這里：

 .nav li { display: inline; } .pull-left { /* added */ float: left; } .pull-right { /* added */ float: right; } .clear { /* added */ clear: both; } 

 <div class="nav"> <div class="container"> <ul class="pull-left"> <li><a href="#">Home</a></li> <li><a href="#">How to</a></li> </ul> <ul class="pull-right"> <li><a href="#">Sign Up</a></li> <li><a href="#">Log In</a></li> <li><a href="#">Help</a></li> </ul> <div class="clear"></div> <!-- added --> <p>test</p> </div> </div> 

Answer 4

您可能希望將Bootstrap鏈接添加到項目中，如下所示：

 .nav li { display: inline; } 

 <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <div class="nav"> <div class="container"> <ul class="pull-left"> <li><a href="#">Home</a></li> <li><a href="#">How to</a></li> </ul> <ul class="pull-right"> <li><a href="#">Sign Up</a></li> <li><a href="#">Log In</a></li> <li><a href="#">Help</a></li> </ul> </div> </div> 

Answer 5

你可以嘗試這個：

.nav li {
    display: inline;
}

.pull-left  { 
display: inline-block;

}
.pull-right  { 
display: inline-block;

}

在這里演示

Answer 6

那個怎么樣？

  .nav li { display: inline; width:100% margin:1%; } a{ text-decoration:none; } .pull-left{ float:left; } .pull-right{ float:right; } 

 <div class="nav"> <div class="container"> <ul class="pull-left"> <li><a href="#">Home</a></li> <li><a href="#">How to</a></li> </ul> <ul class="pull-right"> <li><a href="#">Sign Up</a></li> <li><a href="#">Log In</a></li> <li><a href="#">Help</a></li> </ul> </div> </div>