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>

我已经给了它自己的容器，并将拉动作（和类）放在了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

You seem to be using 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

您还可以在自定义CSS文件中定义pull-left和pull-right，如下所示：

.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;

}

DEMO HERE

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>

如何制作水平导航栏

6 个答案: