Question

我正在尝试显示内联列表，左前5个元素向左拉，最后2个元素向右拉，如下所示：

当用户滚动浏览时，此内联列表需要依附于屏幕顶部，因此我需要设置position: fixed和top: 0px。但是，当我尝试这样做时，列表的左侧最终会堆叠到右侧，如下所示：

在使用固定位置时，有没有办法保留列表的内联显示？如果没有，这个问题的其他解决方案是什么？

这是我的代码，抱歉，如果它是一团糟或格式不正确。我刚刚开始使用web dev：

CSS：

.menu-header {
  background-color: #2658C9;
}
.menu-header .pull-left {
  margin-left: 10%;
  overflow: hidden;
  white-space: nowrap;
}
.menu-header .pull-right {
  margin-right: 10%;
  overflow: hidden;
  white-space: nowrap;
}
.menu-header ul {
  padding-left: 0px;
  display: inline;
}

HTML：

<div class="menu-header">
  <div class="row">
    <ul class="menu-header-list">
      <div class="pull-left">
        <li><a href="index.html" class="menubutton">Home</a></li>
        <li><a href="#" class="menubutton">Tech</a></li>
        <li><a href="#" class="menubutton">Tutorials</a></li>
        <li><a href="#" class="menubutton">Articles</a></li>
        <li><a href="#" class="menubutton">Papers</a></li>
      </div>
      <div class="pull-right">
        <li><a href="#" class="menubutton">About</a></li>
        <li><a href="#" class="menubutton">Contact</a></li>
      </div>
    </ul>
  </div>
</div>

任何帮助都会非常感激，因为我一直试图解决这个问题几个小时。更改显示和＆amp;使用浮动还没有解决问题。谢谢！

Answer 1

试试这个Fiddle

.navbar {
  background: #2658C9;
  color: white;
  position: fixed;
  top: 0;
  width: 100%;
}

.navbar-default .navbar-nav > li > a{
  color: white;
}

<nav class="navbar navbar-default">
  <div class="container-fluid">

      <ul class="nav navbar-nav pull-left">
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
      </ul>

      <ul class="nav navbar-nav pull-right">
        <li><a href="">Link</a></li>
        <li><a href="">Link</a></li>
      </ul>

  </div>
</nav>

Answer 2

问题是由于您没有设置宽度：100％到标头引起的。

 .menu-header{
      width:100%;
    }

Answer 3

查看这些CSS：

.menu-header {
    background-color: #2658C9;
    width:100%;
    overflow:hidden;
}
.menu-header .pull-left {
    float:left;
}
.menu-header .pull-right {
    float:right;
}
.menu-header ul {
    padding-left: 0px;
}
.menu-header ul li {
    display:inline-block;
}

向左和向右浮动并在内联块中显示li

Answer 4

这是你的解决方案

.row{
  width:100%;
  position:fixed;
}

修复您的.row而不是＆＃39; ul＆＃39;

对于完整的代码，我已经创建了一个完整的代码。如果你想要你不能尝试它。

<!DOCTYPE html>
<html>
<head>
<title>working with bootstrap offline</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" type="text/css" href="index.css">

<style type="text/css">

div.menuone ul li{
    list-style-type: none;
    display: inline;
    margin:20px;
}

div.menutwo ul li{
    ist-style-type: none;
    display: inline;
    margin: 30px;

}
div.menuone ul li a, div.menutwo ul li a{
    color: white;
}

div.menuone{
    padding-top: 30px;
}

div.menutwo{
    padding-left: 50px;
    padding-top: 30px;
}


</style>

</head>
<body>
<div class="menu-header">
  <div class="row" style="background-color:blue;">
       <div class="col-md-8 menuone">
        <ul>
        <li><a href="index.html" class="menubutton">Home</a></li>
        <li><a href="#" class="menubutton">Tech</a></li>
        <li><a href="#" class="menubutton">Tutorials</a></li>
        <li><a href="#" class="menubutton">Articles</a></li>
        <li><a href="#" class="menubutton">Papers</a></li>
        </ul> 
       </div>
     <div class="col-md-4 menutwo">
        <ul>
        <li><a href="#" class="menubutton">About</a></li>
        <li><a href="#" class="menubutton">Contact</a></li>
        </ul>
     </div>

    </ul>
  </div>
</div>  



<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>


</body>



</html>

如何显示具有固定位置的内联列表？

4 个答案: