如何制作水平导航栏

我试图制作一些水平导航栏，其中一些项目拉到左侧，另一些拉到右侧。当我尝试使用此代码进行此操作时，它将所有项目放置在屏幕的左上角，有人可以帮忙吗？如何制作水平导航栏

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

来源

2016-02-05 Ronnie Gurr

@IvinRaj - 看问题的最后一行 – Quentin

https://philipwalton.github.io/solved-by-flexbox/demos/grids/ – Quentin

如果您正在使用它，您可能需要为您的项目添加引导链接（并且您似乎正在使用它） – bulanmaster

您可能希望将引导链接添加到您的项目如下：

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

来源

2016-02-05 10:14:36 bulanmaster

你浴液属性拉左，右拉班。在ul.pull右边清除浮动元素后还要添加div，以便ul.pull右边之后的元素不会浮动。

在这里看到：

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

来源

2016-02-05 10:11:40 thn

也可以工作谢谢 –

仍然建议使用Bootstrap链接，因为如果您使用的是Bootstrap的类，并且您没有以任何形式附加到页面本身的框架，您可能会遇到很多问题。总是更好地使用一个框架，而不是一成不变。 – ProDexorite

你似乎使用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; 
}

这也将解决这个问题。

希望这会有所帮助！

来源

2016-02-05 10:13:13 Simplicity

这对我有用，谢谢 –

你可以试试这个：

.nav li { 
    display: inline; 
} 

.pull-left { 
display: inline-block; 

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

}

DEMO HERE

来源

2016-02-05 10:17:32

如何关于那个？

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

来源

2016-02-05 10:33:43

你可以尝试另一种方法是使各个部门两侧，各显示为inline-block的。然后使用边距来分割它们。根据您的偏好设置外部边距，并将内部边距设置为“自动”，并自然保持测量不变。所以它会是这样的：

<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。建议

来源

2016-02-05 11:10:55

如何制作水平导航栏

回答

相关问题