在网页上显示菜单栏

我有一个菜单，其中一些菜单应该在右侧，其中一些菜单必须在左侧。在网页上显示菜单栏

我能够做到这一点使用BootStrap Framework，我想这样做没有它。这是我的代码。

HTML

<html> 
<head> 
    <title>TODO supply a title</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    // <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css" rel="stylesheet"> 
    <link rel="stylesheet" href="index_style.css"> 
</head> 
<body> 
    <div class="nav"> 
     <div class="container"> 
      <ul class="pull-left"> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">Categories</a></li> 
       <li><a href="#">About Us</a></li> 
       <li><a href="#">Contact Us</a></li> 
      </ul> 
      <ul class="pull-right"> 
       <li><a href="#">Register</a></li> 
       <li><a href="#">Login</a></li> 
      </ul> 
     </div> 
    </div> 
</body>

CSS

.nav a { 
    color: #5a5a5a; 
    font-size: 11px; 
    font-weight: bold; 
    padding: 14px 10px; 
    text-transform: uppercase; 
} 

.nav li { 
    display: inline; 
} 

body{ 
    margin: 0; 
}

来源

2015-10-18 Rehan

是的，你可以让导航菜单栏没有引导。在这里，我做演示。

http://jsfiddle.net/Xroad/33ovfgeL/

<div class="nav"> 
     <div class="container"> 
      <ul class="pull-left"> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">Categories</a></li> 
       <li><a href="#">About Us</a></li> 
       <li><a href="#">Contact Us</a></li> 
      </ul> 
      <ul class="pull-right"> 
       <li><a href="#">Register</a></li> 
       <li><a href="#">Login</a></li> 
      </ul> 
      <div class="clear"></div> 
     </div> 
    </div>

.nav a { 
    color: #5a5a5a; 
    font-size: 11px; 
    font-weight: bold; 
    padding: 14px 10px; 
    text-transform: uppercase; 
} 

.nav li { 
    display: inline; 
} 
.pull-left{float:left} 
.pull-right{float:right} 
.clear{clear:both} 
.container{background-color:#bbb}

来源

2015-10-18 17:16:54

非常好！顺便说一句，我有什么'清除'呢？ – Rehan

它只是清除浮动效果，所以下一个元素不会受浮动影响。 –

你必须分开/定义CSS规则：右拉/下拉左AREN没有定义无论如何与你的大部分课程一起编辑。

*您标记Twiiter，引导你的问题大部分这些类中被使用。

html { 
 
    box-sizing: border-box; 
 
} 
 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit; 
 
} 
 
body { 
 
    margin: 0; 
 
} 
 
.nav { 
 
    margin-left: -35px; 
 
} 
 
.container { 
 
    padding-right: 15px; 
 
    padding-left: 15px; 
 
    margin-right: auto; 
 
    margin-left: auto; 
 
} 
 
ul.pull-left { 
 
    float: left; 
 
} 
 
ul.pull-right { 
 
    float: right; 
 
} 
 
.nav li { 
 
    display: inline-block; 
 
} 
 
.nav ul > li > a { 
 
    color: #5a5a5a; 
 
    font-size: 11px; 
 
    font-weight: bold; 
 
    padding: 14px 10px; 
 
    text-transform: uppercase; 
 
}

<div class="nav"> 
 
    <div class="container"> 
 
    <ul class="pull-left"> 
 
     <li><a href="#">Home</a> 
 

 
     </li> 
 
     <li><a href="#">Categories</a> 
 

 
     </li> 
 
     <li><a href="#">About Us</a> 
 

 
     </li> 
 
     <li><a href="#">Contact Us</a> 
 

 
     </li> 
 
    </ul> 
 
    <ul class="pull-right"> 
 
     <li><a href="#">Register</a> 
 

 
     </li> 
 
     <li><a href="#">Login</a> 
 

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

来源

2015-10-18 16:36:46 vanburen

我不希望使用任何框架。我想在我的css文件中单独使用属性。 – Rehan

您是否使用Bootstrap，因为您的问题被标记为twitter-bootstrap。 – vanburen

不，我没有使用它。我只是想表明我用bootstrap获得解决方案。我可以知道如何去做吗？ – Rehan

在网页上显示菜单栏

回答

相关问题